【CSS】深入理解 CSS 动画

CSS 动画允许开发者创建在一定时间内改变元素样式的效果。这里是一个简单的 CSS 动画示例，它会使一个元素在 2 秒内从完全透明变为完全不透明，然后再从完全不透明变为完全透明：




@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
 
.animated-element {
  animation: fadeInOut 2s infinite;
}

HTML 使用这个动画：




<div class="animated-element">This element will fade in and out.</div>

这段代码定义了一个名为 fadeInOut 的关键帧动画，它有三个关键帧：0%、50% 和 100%。.animated-element 类使用这个动画，并设置了动画的持续时间为 2 秒，并且设置为无限次重复（infinite）。