[CSS] animation 속성

 

📌 animation

: 요소에 애니메이션 동작을 지정

 

 

 

1. animation 정의하기

@keyframes

: 애니메이션 과정의 중간 절차를 제어할 수 있는 속성

• 글자 크기 변화: font-size
• 상자 이동 효과: position / margin / translate / padding

@keyframes 변수명 {
  from(0%) {
    ...  
  }
  
  to(100%) {
    ...
  }
}

 

@keyframes moveEffect {
  0% {
    font-size: 12px;
  }

  100% {
    font-size: 24px;
  }
}

 

 

 

2. animation 사용하기

필수값

• animation-name: 애니메이션 이름
• animation-duration: 애니메이션 지속 시간

.visual-text {
  font-family: Georgia, 'Times New Roman', Times, serif;
  animation-name: moveEffect;
  animation-duration: 5000ms;
}

 

 

속성

• animation-name: @keyframes에서 지정한 애니메이션 이름
  
  
  
• animation-duration: 애니메이션 지속 시간
  - 시간(ms, s)으로 지정
  
  
  
• animation-delay: 애니메이션 시작 지점 지정
  - 시간(ms, s)으로 지정
  
  
  
• animation-direction: 애니메이션 방향 설정
  - normal: 순방향
  - reverse: 역방향
  - alternate: 순방향 -> 역방향 (왕복 1회)
  - alternate-reverse: 
  * animation-iteration-count와 같이 사용해야 함
  
  
  
• animation-fill-mode: 애니메이션이 재생되기 전과 후의 스타일을 적용
  - none: 기본값
  - forwards: 애니메이션이 끝나면 애니메이션의 마지막 스타일을 유지  
  - backwards: 애니메이션이 재생되기 전 대기할 때 첫 번째 스타일로 설정
  - both: forwards + backwards 모두 적용
  
  
  
• animation-iteration-count: 애니메이션 재생 횟수
  - 횟수
  - infinite: 무한 반복 재생
  
  
  
• animation-play-state: 애니메이션 재생 상태
  - paused: 일시정지
  - running: 재생 
  
  
  
• animation-timing-function: 애니메이션이 수행되는 속도를 지정
  - https://www.the-art-of-web.com/css/timing-function/
  - https://cubic-bezier.com/#0,.93,0,.97

.techit {
    animation: fadeEffect;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

 

 

 

3. animation 단축 속성

animation: name duration (delay) (fill-mode) (direction) (iteration-count);

 

 

* 동작 줄이기 옵션

• 사용자가 애니메이션 동작을 줄이고자 선택할 때

@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

 

 

 

---

 

* 애니메이션 사이트

 

 

anime

anime.js

 

 

GSAP

Homepage | GSAP

 

 

---

참고

 

animation - CSS: Cascading Style Sheets | MDN

 

@keyframes - CSS: Cascading Style Sheets | MDN