css-15: animation

animation

@keyframes 애니메이션 이름 {
from{
}
to {
}
}
사용하기
img {
animation : 애니메이션 이름 재생시간 옵션
}

무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.

    <img src="https://prayer0420.github.io/assets/images/CA111.JPG" alt="" />

img {
  width: 500px;
  height: 500px;
  border: 5px solid black;
  border-radius: 50%;
  animation: animation 5s ease-in-out infinite;
}

@keyframes animation {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg) translateX(100px);
  }
}

• 5초 동안 이미지가 y축으로 180도 돌아가면서 x축으로 100px 움직이고 다시 원래 자리로 돌아간다음 180도 돌아가고 100px 움직이는게 무한 반복됨.
• translate이 이루어지고 다시 원래 자리에서 애니메이션이 시작되기 때문에 끊기는 느낌이 나서 어색함.
• 180도 돌아가고 100px 움직였으면 그대로 애니메이션이 되돌려지게 해서 끊기지 않게 만들기

from, to를 쓰는 대신 스텝으로 애니메이션 만들기

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

• 마지막 스텝에서는 애니메이션이 원래 자리로 돌아오게 해서 애니메이션 부드럽게 작동.
• 0부터 100% 중 원하는 갯수만큼 스텝을 가질 수 있음.
• property를 꼭 transform 안해도 되지만 일부 property 애니메이션 잘 안될 수도 있어서 transform을 추천.
• 두개의 스텝만 가지고 싶다면 0%, 100%로 적지 않고 from, to 사용.
• opacity: 0% 사용해서 이미지 안보였다가 보이게 하는거 흔하게 사용.

https://animista.net/ (CSS 에니메이션)