animation

전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어

---

keyframes

animation-name

animation-duration

키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의되어야 한다.

지정할 스타일 시트에 animation-name과 animation-duration을 넣어준다.

형식

 @keyframes <키 프레임명>{
  0%{/* CSS 코드 */}
  n%{/* CSS 코드 */}
  100%{/* CSS 코드 */}
}

예시

  @keyframes bgchange {
    0% {
      background-color: red;
    }
    25% {
      background-color: orange;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: green;
    }
  }

div{
  width:100px;
  height:100px;
  background-color:red;
  animation-name:bgchange;
  animation-duration:5s;
}

---

animation-iteration-count

애니메이션 반복 횟수를 정한다.

무한 반복일 경우 infinite를 넣는다.

형식

animation-iteration-count: <정수> or <infinite>;

예시

  @keyframes bgchange {
    0% {
      background-color: red;
    }
    25% {
      background-color: orange;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: red;
    }
  }

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: bgchange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

---

animation-delay

애니메이션이 시작되는 시간을 지연시킨다.

형식

animation-delay:<지연 시간>;

예시

  @keyframes bgchange {
    0% {
      background-color: red;
    }
    25% {
      background-color: orange;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: red;
    }
  }

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: bgchange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay:3s;
  }

---

animation-fill-mode

애니메이션이 끝나도 원래대로 돌아가지 않게 할 수 있다.

형식

animation-fill-mode:<속성값>;

예시

  @keyframes bgchange {
    0% {
      background-color: red;
    }
    25% {
      background-color: orange;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: red;
    }
  }

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: bgchange;
    animation-duration: 5s;
    animation-fill-mode: forwards;
  }

---

---

animation-direction

애니메이션 진행 방향을 바꿀 수 있다.

형식

animation-direction:<속성값>;

예시

  @keyframes bgchange {
    0% {
      background-color: red;
    }
    25% {
      background-color: orange;
    }
    50% {
      background-color: yellow;
    }
    100% {
      background-color: green;
    }
  }

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: bgchange;
    animation-duration: 5s;
    animation-direction:reverse;
  }

---

animation-play-state

애니메이션을 일시중지하거나 재시작 할 수 있다.

자바스크립트가 필요하기 때문에 생략

---