[分享]css3常用的四个动画效果

CSS3中提供了许多动画效果，其中常用的四个动画效果如下：

/* 第一个动画效果：旋转 */
.rotate {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 第二个动画效果：缩放 */
.scale {
  animation: scale 2s ease-in-out infinite alternate;
}
@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

/* 第三个动画效果：平移 */
.translate {
  animation: translate 2s ease-in-out infinite alternate;
}
@keyframes translate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 第四个动画效果：淡入淡出 */
.fade {
  animation: fade 2s ease-in-out infinite alternate;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
} 

这四种常用的动画效果可以用于许多需要动态效果的网页设计中，提高用户的体验感。