[css] 이미지 애니메이션 효과 (ft. 무한 회전, 사라지기, 출현하기)

css 이미지 애니메이션 효과

 

css를 이용한

이미지 애니메이션 효과입니다.

 

웹이나 앱의 인트로 화면에서 주로 이미지 애니메이션 효과를 사용하게 됩니다.

 

CSS - 무한 회전 애니메이션

.img {
  animation: rotate_image  6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

 

CSS - 나타나는 애니메이션

.img2 {
  animation: rotate_image 6s linear infinite, scale1 6s linear infinite;
  transform-origin: 50% 50%;
}

.img2 {
  animation: rotate_image 6s linear infinite, scale1 6s linear infinite;
  transform-origin: 50% 50%;
}

 

CSS - 사라지는 애니메이션

.img3 {
  animation: rotate_image 6s linear infinite, scale2 6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes scale2 {
  0%   { transform: scale(1) }
  100%  { transform: scale(0) }
}

 

한 번에 보기