[CSS] Animation 동작효과 주기

Animation은 JS로 줘야만 했던 동작들 중 간단한 것들을 CSS에서 줄 수 있게 만들어주는 속성이다.

@keyframe과 같이 써서 mouseover시에 동작들을 주거나 할 수 있다.

속성	설명
animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
animation-name	애니메이션 효과의 이름을 설정함.
animation-duration	애니메이션 효과를 재생할 시간을 설정함.
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정함.
animation-direction	애니메이션의 진행 방향을 설정함.
animation-timing-function	애니메이션 효과의 시간당 속도를 설정함.
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
animation-play-state	애니메이션 효과의 재생 상태를 설정함.

 

See the Pen zYqYVxm by Levup (@misssim29-the-flexboxer) on CodePen.

이렇게 애니메이션 효과를 줄 수 있다.

ani1:hover{animation: ani 1s ease-in-out .5s 2 alternate;}

 여기서 순서는 애니메이션 이름, 지속시간, 진행방식, 시작전딜레이, 횟수, 진행방향이다.

진행방식은 (animation-timing-function)

ease-in	기본형으로 시작이 빠르게
ease-in-out	시작과끝이 빠르게
lieaner	일정속도
ease-out	끝이 빠르게

 

이렇게 대표적으로 있고, 진행방향은 (animation-direction)

alternate	앞에부터 뒤까지 진행하고 다시 뒤에서 앞으로 진행
normal	앞에서부터 뒤로 진행
reverse	뒤에서 앞으로 진행

이렇게 있다.