[CSS] animation

CSS animation

animation 축약형

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

• 이름 > 실행속도 > 지연시간 > 반복횟수 > 애니메이션 속도 조절/그래프 > 반복방향설정 > 끝난후위치 > 실행or정지

animation: fadeIn 4s 1s infinite linear alternate;

animation 속성 종류

animation-name : @keyframes 이름
animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
animation-delay : 애니메이션을 시작하기 전 지연시간 설정
animation-iteration-count : 반복 횟수 지정
animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )
animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정