animation-name
키프레임 애니메이션 이름을 지정.**
특수문자를 제외한 문자열, 숫자, -,_ 를 조합해 1글자 이상.
animation-duration
애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간
animation-timing-function
애니메이션 진행 속도, 또는 가속 방식을 지정. 미리 설정된 속도 커브 중 한가지를 선택.
animation-delay
애니메이션 시작 지연 시간.
"s"(초), "ms"(밀리초) 2가지 단위 사용 가능
animation-direction
애니메이션 재생 방향
_normal: 정방향 재생
reverse: 역방향 재생
alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작)
alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
animation-iteration-count
애니메이션 반복 횟수 지정
양수: 정수로 횟수 표기. 횟수만큼 애니메이션 반복 실행 후 정지.
infinite: 무한 반복.
뭐가 너무 많죠?? 복잡하게 여러줄을 쓸 필요없이
한 줄로도 쓸 수 있어요!
animation:my 5s linear 1s infinite alternate;
이름, 동작시간, 가감속 속도, 지연시간, 반복, 역방향
이 순서로 애니메이션에 적으시면 따로 적지 않아도 한 줄로 편하게 적을 수 있습니다!
디자인 TIL 📝