애니메이션
애니메이션 (Animation)
애니메이션 속성은 IE10 이상 지원한다.
animation-name 애니메이션 이름 (@keyframes 이름)
animation-duration 애니메이션 시간(초단위)
animation-timing-function 애니메이션 타이밍 함수
animation-delay 애니메이션 지연시간
400ms(= 0.4s), 2s, -2s
음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작된다.
animation-direction 애니메이션 종료 후, 진행 (순/역)방향
<normal>
: from - to (기본값)<reverse>
: to - from<alternate>
: 홀(nomal) 짝(reverse)<alternate-reverse>
: 홀(reverse) 짝(nomal)
animation-iteration-count 애니메이션 반복 횟수
1(기본값),
<number>
(2,4,1.5...),<infinite>
무한반복
animation-play-state 애니메이션 재생/일시정지 설정
<running>
(기본값)<paused>
animation-fill-mode 애니메이션 시작 전/종료 후 키프레임 설정 애니메이션이 실행 상태가 아닐 때 (대기 or 종료) 요소의 스타일 지정
<none>
:대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
<forwards>
:대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
<backwrads>
:대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
<both>
:대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
animation 애니메이션 속기형
순서 :
<name>
<timing-funtion>
<iterration-count>
<direction>
<fill-mode>
<delay>
예시
참고
Last updated