[CSS] Animation(애니메이션) 마스터하기

◾ Animation (애니메이션)

→ infinite 무한 반복

→ @keyframes 변수이름 {}

  animation: Flips 5s ease-in-out infinite;

@keyframes Flips {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes Flips {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg) translateX(100px);
  }
  100% {
    transform: rotateY(0);
  }
}