[CSS기초] 10. CSS 애니메이션(속성)

10. animation(속성)

값	의미	기본값
animation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니매이션 지속시간 설정	0s
animation-timing-function	타이밍 함수 지정	ease
animation-delay	애니매이션 대기 시간 설정	0s
animation-iteration-count	애니매이션 반복 횟수 설정	1
animation-direction	애니매이션 반복방향설정	normal
animation-fill-mode	애니매이션 전후 상태 설정	none
animation-play-state	애니메이션 재생과 정지 설정	running

 

10.1. @keyframes – 2개 이상의 애니메이션 중간 상태(프래임)을 지정

사용법 @keyframes 애니메이션-이름 {     0%{ 속성 : 값; } 50%{ 속성 : 값; } 100%{ 속성 : 값; } }

예제 @keyframes boxwidth-up{     0%{ width : 100px; }     100%{ width: 500px; } }

적용 .box {     animation-name: boxwidth-up;     animation-duration: 2s     animation-iteration-count : infinite; } OR   .box {     animation: boxwidth-up 2s infinite anlternate; }

 

10.2. animation-name - @keyframes의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes이름	이름과 일치하는 애니메이션 적용

 

10.3. animation-duration – 애니메이션 지속시간 설정

값	의미	기본값
시간	지속 시간을 설정	0s

 

10.4. animation-timing-function – 타이밍 함수 지정

값	의미	cubic Bezier 값
ease	빠르게-느리게	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	일정하게	cubic-bezier(0, 0, 1, 1)
ease-in	느리게 – 빠르게	cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게 – 느리게	cubic-bezier(0, 0, 0.58, 1)
ease-in-out	느리게 빠르게 느리게	cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n,n,n,n)	지정된 값
step(n)	n번 분할된 애니매이션

ex) animation-timeing-function : ease-in;

10.5. animation-delay – 애니메이션 대기시간

값	의미	기본값
시간	대기 시간 성정	0s

 

10.6 animation-iteration-count – 애니메이션 반복횟수 설정

값	의미	기본값
숫자	반복횟수	1
infinite	무한반복

 

10.7. animation-direction – 애니메이션 반복 방향설정

값	의미	기본값
normal	정방향반복	normal
reverse	역방향반복
alternate	정방향에서 역방향으로 반복
alternate-reverse	역방향에서 정방향으로 반복

 

10.8. animation-fill-mode – 애니메이션 전후상태 위치설정

값	의미	기본값
none	기존위치에서 시작 -> 애니메이션 시작 위치로 이동 ->동작 -> 기존 위치에서 끝	none
forwards	기존위치에서 시작 -> 애니메이션 시작 위치로 이동 ->동작 -> 애니메이션 끝나는 위치에서 끝
backwards	애니메이션 시작위치에서 시작 -> 동작 ->기존위치에서 끝
both	애니메이션 시작 위치에서 시작 ->동작 ->애니메이션 끝 위치에서 끝

 

10.9. animation-play-state – 애니메이션 재생과 정지를 설정

값	의미	기본값
running	애니매이션 동작	running
paused	애니메이션 동작을 정지

References: heropy.blog