css编写动画

CSS可以通过@keyframes规则来编写动画。以下是一个简单的例子：

/* 定义一个名为myAnimation的动画 */
@keyframes myAnimation {
  /* 从0%到50%的时间段，元素透明度从0到1 */
  0% { opacity: 0; }
  50% { opacity: 1; }
  /* 从50%到100%的时间段，元素透明度从1到0 */
  100% { opacity: 0; }
}

/* 应用myAnimation动画到元素 */
.example {
  animation-name: myAnimation;
  animation-duration: 3s; /* 动画持续时间为3秒 */
  animation-iteration-count: infinite; /* 无限循环 */
}

在上面的例子中，我们定义了一个名为“myAnimation”的动画，并将其应用于class为“example”的元素。动画定义了元素在不同时间段的样式，以及动画的持续时间和循环次数。

除了opacity属性外，CSS还支持许多其他动画属性，例如transform、translate、rotate等。可以通过这些属性来实现各种有趣的动画效果。