CSS中的@keyframes

@keyframes 是CSS3动画中用于定义动画序列关键帧的关键字。通过使用 @keyframes，可以实现从一个样式逐渐过渡到另一个样式。

语法

@keyframes animation-name {
  keyframes-selector {
    keyframes-declarations;
  }
}

• animation-name：定义动画的名称。
• keyframes-selector：定义关键帧的百分比。
• keyframes-declarations：定义关键帧的样式。

示例

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  animation-name: fade-in;
  animation-duration: 1s;
}

通过上述代码片段，我们定义了一个名为fade-in的动画。在动画中，元素的透明度从 0% 的不可见到 100% 的完全可见。最后，通过.fade-in类将动画应用到元素上，并设置动画的持续时间为1秒。此时，元素将呈现由完全不可见到完全可见的过渡效果。

总结

使用 @keyframes，我们可以很容易地实现复杂的动画序列，包括旋转、缩放等等。但是，过度地使用动画会降低页面的性能，影响用户体验，请根据实际需求选用适当的动画效果。