web前端开发—进阶css（动画）

在CSS中，我们可以使用不同的技术来创建动画，例如使用@keyframes规则创建关键帧动画，或者使用JavaScript和CSS的transform属性来创建复杂的动画。

以下是一个使用CSS @keyframes 规则创建简单淡入淡出动画的例子：

/* 定义动画 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
 
/* 应用动画 */
.element {
  animation: fadeInOut 2s infinite;
}

在这个例子中，.element 类将应用一个名为 fadeInOut 的动画，该动画在2秒内执行，并且是无限循环的。动画从完全透明开始，然后变为完全不透明，并最后再次变为完全透明，形成一个淡入淡出的效果。

如果你想要更复杂的动画，比如一个物体在屏幕上移动，你可以使用以下代码：

/* 定义动画 */
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.element {
  animation: moveRight 2s infinite;
}

在这个例子中，.element 类将应用一个名为 moveRight 的动画，该动画在2秒内从左边移动到右边100像素的位置，并且是无限循环的。这是一个使用CSS关键帧和transform属性创建的简单移动动画。