[카카오테크캠퍼스 선택과정] 애플 예제: 애니메이션

코드 보기

 

animation의 8가지 속성

.item {
  width: 200px;
  height: 200px;
  background-color: orange;
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: steps(4);
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.item:hover {
  animation-play-state: paused;
}

@keyframes myAnimation {
  0% {
    width: 200px;
  }
  100% {
    width: 400px;
  }
}

.item {
  width: 200px;
  height: 200px;
  background-color: orange;
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-fill-mode: none;
  /*
  none: 애니메이션이 끝나면 제자리로 돌아옴
  forwards: 키프레임 100% 상태로 유지
  backwards: 키프레임 0% 상태에서 시작
  both: forwards와 backwards를 모두 적용
  */
}

@keyframes myAnimation {
  0% {
    transform: translate(200px, 50px);
    background-color: royalblue;
  }
  100% {
    transform: translate(200px, 200px);
    background-color: red;
  }
}