애니메이션

시간에 따라 CSS 속성이 자동으로 변하도록 만드는 것

	transition	animation
트리거	상태 변화 필요 (hover)	자동 재생
반복	x	o
제어	단순	복잡
용도	버튼/호버	로딩, 배경, 장식

 

1. @keyframes

무엇이 어떻게 움직이는가

@keyframes 이름 {
 시점 { CSS 속성 }
}

@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transfrom: translateY(-20px); }
}

 

%는 전체 시간 기준

from은 0% 에서, to는 100%

예제에서는 시작과 끝은 원래 위치. 중간은 위로 20px 이동.

2. animation

얼마나, 어떻게 재생되는가

animation: float 6s ease-in-out infinite;

animation-name: float;
animation-duration: 6s; /* 한 사이클이 걸리는 시간 */
animation-timing-function: ease-in-out; /* 움직임 감속 곡선 */
animaion-itertaion-count: infinite; /* 반복 횟수 */

 

timing-function

linear	기계적
ease	기본
ease-in	시작 느림
ease-out	끝 느림
ease-in-out	자연스러움

 

direction 

/*
normal
reverse
alternate
alternate-reverse
*/
animation-direction: alternate; /* 방향. 왔다 갔다 자연스럽게 반복 */

 

 

delay

animation-delay: 0.5s;

 

fill-mode (끝난 뒤 상태)

animation-fill-mode: forwards; /* 마지막 상태 유지 */

 

값	의미
none	원래대로
forwards	마지막 상태 유지
backwards	시작 상태 적용
both	둘 다

 

--animate-float: float 6s ease-in-out infinite;

 

animation 속성 전체를 변수로 만든 것.

아래처럼 사용 

.card {
  animation: var(--animate-float);
}

 

접근성

motion 민감 사용자 대응

@media (prefers-reduced-motion: reduce) {
 * {
  animation: none !important;
  transition: none !important;
 }
}

 

또는 애니메이션 변수만 끄기

@media (prefers-reduced-motion: reduce) {
 :root {
  --animate-float: none;
 }
}