CSS animation

❓animation

: 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 하는 기법

transition vs animation

transition

특정한 이벤트를 기점으로 작동한다 ( hover 등 )

animation

시작하기 위한 이벤트가 필요없다.
시작, 정지, 반복까지 제어할 수 있다.

animation 속성은

@keyframes로 애니메이션을 정의하고, 정의한 애니메이션을
불러와서 제어해주어야 한다.

하나의 애니메이션 속성을 사용하기 위해서는 animation 속성 하나
@keyframe 속성 하나가 필요하다는 것 !
<- 최소한의 경우

keyframes

: css 애니메이션의 시작, 중간, 끝등의 중간상태를 정의한다.

@keyframes moveRight{
	from {
    	left : 0; 
    }
    to {
    	left : 200px 
    }
}

이런 식으로 작성해 줄 수 있다.

animation 관련 속성

animation-name

어떠한 keyframes를 요소에 적용할 것인지 지정

 animation-name : moveRight 

animation-duration

애니메이션을 한 번 재생하는데 걸리는 시간을 설정

 animation-duration : 2s 

animation-direction

애니메이션 재생 방향을 정의한다. (정방향/역방향)
from => to ( 정방향)
to => from ( 역방향 )

 aniamtion-direction: alternate 

nomal(기본값) : 정방향으로 재생한다.
reverse : 역방향으로 재생한다.
alternate : 정방향으로 재생한다.
단, 반복시 정방향/역방향을 번갈아 재생한다.
alternate-reverse : 역방향으로 재생한다.
단, 반복시 역방향/정방향을 번갈아 재생한다.

animation-iteration-count

애니메이션 재생 횟수를 정의한다.

  animation-iteration-count:infinite 

animation-timing-function

애니메이션 재생 패턴을 정의한다.
transition-timing-function과 유사하다.

  animation-timing-function:ease-in-out

animation-delay

애니메이션 시작을 얼마나 지연할 지 설정한다.

  animation-delay: 2s

animation 단축 속성

animation: moveRight 0.4s linear 1s infinite alternate

animation 실습

• css animation 점점 둥글고 작아지게 만들기