15.animation

1. 개요

MDN

특정 요소에 애니메이트 효과를 적용할수 있다. 애니메이션 세부 속성을 지정한 @keyfames를 이용해 키프레임에서 변하는 속성값을 설정해서 애니메이션을 추가한다.

2. 기본문법

animation: <property> <duration> <timing-function> <delay>;

예시: animation: rotateBox 3s infinite ease;

3. 속성

3.1. animation()

속성 명	초기값	설명
animation-name	none	애니메이션 이름
animation-duration	Os	지속 시간(s, ms 단위 사용)
animation-timing-function	ease	속도변화 지정
animation-delay	Os	시작 전 지연 시간 지정
animation-iteration-count	1	반복 여부(숫자, infinite)
animation-direction	normal	방향(normal, reverse, alternate, alternate-reverse)
animation-fill-mode	none	실행 전과 후에 대상에 스타일을 적용방법(forwards,backwards,both)
animation-play-state	running	실행 여부 (paused, running)

3.2. @keyframes

형식

@keyframes [animation-name] {
from { 속성 : 속성 값; }
50% {속성 속성 값; }
to { 속성: 속성 값; }
}

예문

@keyframes rotateBox {
  from {
    transform: rotate(Odeg);
  }
  50% {
    ransform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}