animation 관련 속성
animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.
animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.
animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
animation-play-state 속성은 애니메이션 진행 상태를 설정합니다.
animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.
transform-style
flat이 기본값으로 자식 요소를 2차원에 배치,
preserve-3d는 자식 요소를 3차원에 배치한다
animation-fill-mode
애니메이션이 끝난 후의 상태를 설정한다.
none이 기본 위치 => 시작 위치 => 종료 위치 => 기본 위치
forwards는 기본 위치 => 시작 위치 => 종료 위치
backwards는 시작 위치 => 종료 위치 => 기본 위치
both는 시작 위치 => 종료 위치
출처
codepen 모두 @heropark님 Fork
