[分享]css关键帧动画代码

今天我们来学习一下CSS的关键帧动画，它提供了一种强大的方式来实现各种动态效果。关键帧动画允许我们在动画中指定多个关键帧，其中每个关键帧定义了动画的一个阶段。我们可以使用keyframes规则来创建一...

今天我们来学习一下CSS的关键帧动画，它提供了一种强大的方式来实现各种动态效果。关键帧动画允许我们在动画中指定多个关键帧，其中每个关键帧定义了动画的一个阶段。

我们可以使用@keyframes规则来创建一个关键帧动画。该规则由以下几个部分组成：

@keyframes 动画名称 {
  0% {
    /*定义起始样式*/
  }
  50% {
    /*定义中间样式*/
  }
  100% {
    /*定义结束样式*/
  }
} 

在这个规则中，我们首先定义了一个动画名称，并指定了各个关键帧的百分比。接下来，在每个关键帧中，我们可以指定CSS样式的属性值，从而创建动画效果。

假设我们要创建一个简单的关键帧动画，让一个div元素在页面中左右移动。我们可以编写如下代码：

<div class="box"></div>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 0;
  animation: move 2s infinite;
}

@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 100%;
  }
}
</style> 

在这个例子中，我们使用了一个名为“move”的关键帧动画来控制div元素的位置。我们首先定义了div元素的基本样式，包括其大小、背景颜色和位置属性。接下来，我们在div元素上使用了animation属性，为其指定了刚刚创建的“move”动画。

最后，我们在@keyframes规则中指定了各个关键帧的样式。在0%关键帧中，div元素的left属性值为0，即从页面的最左侧开始。到50%关键帧时，div元素的left属性值为50%，表示它已经移动到了页面中间。最后，在100%关键帧中，div元素的left属性值为100%，表示它已经从页面的右侧离开。

通过这些简单的代码，我们就可以创建出一个简单的左右移动动画效果。当然，关键帧动画的功能远不止于此，它还能够实现各种各样的效果，如旋转、缩放、淡入淡出等。无论你想要什么样的动画效果，关键帧动画都能够帮助你实现。