[分享]css写一个动画

CSS 可以用来设计和布局网站，还可以为网站添加各种各样的效果，其中之一就是动画效果。实现 CSS 动画有多种方式。其中，可以使用 transition 属性来创建简单的动画效果，也可以使用 anim...

CSS 可以用来设计和布局网站，还可以为网站添加各种各样的效果，其中之一就是动画效果。

实现 CSS 动画有多种方式。其中，可以使用 transition 属性来创建简单的动画效果，也可以使用 animation 属性来创建更复杂的动画效果。

下面是一个使用 animation 属性创建的动画效果示例：

/* 定义动画关键帧 */
@keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
/* 定义样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 1s infinite;
  /* 1s：持续时间，infinite：无限循环 */
} 

在上述代码中，我们定义了一个名为 move 的关键帧，它包含了三个阶段。然后，我们把这个关键帧赋给了一个名为 box 的元素的 animation 属性，这个元素就会开始动画。

在这个动画中，元素在垂直方向上来回移动了一段距离。