[CSS] animation03

CSS3     ANIMATION

일반적으로 CSS 애니메이션을 사용하며 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.

• 비교적 작은 효과나  CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width변경 애니메이션은 JavaScript를 사용하는 것보다 훨씬 간편하며 효과적이다.
• 세밀한 제어를 위해서는 JavaScript 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 도감기 또는 감속과 같은 고급 효과는 JavaScript가 훨씬 유용하다.

CSS 순서

animation : name duration timing-function delay iteration-count direction fill-mode play-state

animation : none 0 ease 0 1 normal none running

* animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0이 셋팅되어 어떤 애니메이션도 실행되지 않는다.

프로퍼티	설명	기본값
animation-name	@keyframes 애니메이션 이름을 지정한다
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위로 지정한다.	0s
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위로 지정한다	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다.	1
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.	running
animation	모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax)

( 평소에 잘 몰랐던 것 자세하게 보기 ▼ )

animation-direction : 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

프로퍼티값	설명
normal	기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverse	to에서 from 방향으로 진행한다.
alternate	홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse	홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

animation-fill-mode : 애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.

프로퍼티값	상태	설명
none	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

ainmation-play-state : 애니메이션 재생 상태(재생 또는 중지)를 지정한다. running / paused

hover 했을 때 animation-play-state : paused 를 주면 느낌 온다.

출처 : https://poiemaweb.com/css3-animation