动画属性 CSS

在前端开发中，动画是非常重要的一项技术。动画能够为网站增加一定的交互性，使用户在使用过程中更加愉悦和有趣。在 CSS3 中，提供了许多的动画属性，可以方便地制作各种动画效果。

基本语法

在 CSS 中，定义动画需要用到 @keyframes 规则以及动画属性。

@keyframes 规则

@keyframes 规则用于定义动画的关键帧，即动画的起始状态和结束状态，并在其中定义整个动画的步骤。

语法如下：

@keyframes <name-of-animation> {
  0% {
    /* CSS属性值 */
  }
  50% {
    /* CSS属性值 */
  }
  100% {
    /* CSS属性值 */
  }
}

其中，<name-of-animation> 为所定义的动画名称。在 @keyframes 规则中，通过百分比来指定动画的进展情况，从而可以定义多个关键帧。

动画属性

CSS 提供了众多的动画属性，可以为元素添加特定的动画效果。

animation-name

animation-name 属性用于指定动画的名称。

animation-name: <name-of-animation>;

其中，<name-of-animation> 为 @keyframes 规则中所定义的动画名称。

animation-duration

animation-duration 属性用于指定动画的持续时间。

animation-duration: <duration>;

其中，<duration> 可以设置为以下值：

• s：秒。
• ms：毫秒。

animation-delay

animation-delay 属性用于指定动画开始前的延迟时间。

animation-delay: <delay>;

其中，<delay> 可以设置为与 animation-duration 相同的值。

animation-timing-function

animation-timing-function 属性用于指定动画的时间曲线。

animation-timing-function: <timing-function>;

其中，<timing-function> 可以设置为以下值：

• ease：默认的时间曲线，缓慢进入、缓慢退出。
• linear：线性时间曲线，匀速运动。
• ease-in：缓慢进入，快速退出。
• ease-out：快速进入，缓慢退出。
• ease-in-out：中间加速，两边缓慢进出。
• cubic-bezier()：自定义时间曲线，需要设置四个值，分别为 $P_1$、$P_2$ 的坐标值。可以通过在线生成工具来生成。

animation-iteration-count

animation-iteration-count 属性用于指定动画的循环次数。

animation-iteration-count: <count>;

其中，<count> 可以设置为以下值：

• infinite：无限循环。
• <number>：循环次数。

animation-direction

animation-direction 属性用于指定动画的方向。

animation-direction: <direction>;

其中，<direction> 可以设置为以下值：

• normal：正常方向（默认）。
• reverse：反方向。
• alternate：先正常方向，再反方向，依次循环。
• alternate-reverse：先反方向，再正常方向，依次循环。

animation-play-state

animation-play-state 属性用于指定动画的播放状态。

animation-play-state: <state>;

其中，<state> 可以设置为以下值：

• running：动画正在运行（默认）。
• paused：动画暂停。

animation-fill-mode

animation-fill-mode 属性用于指定动画完成后元素的状态。

animation-fill-mode: <mode>;

其中，<mode> 可以设置为以下值：

• none：不改变元素的状态（默认）。
• forwards：在动画结束时，元素保持动画最后的状态。
• backwards：在动画延迟执行的时间段中，元素使用动画的第一帧。
• both：相当于同时设置了 forwards 和 backwards。

示例

下面是一个简单的动画示例，在页面中定义了一个方块，当鼠标悬停在其上方时，会发生放大和旋转的动画效果。

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

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: scale;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.box:hover {
  animation-play-state: paused;
}

@keyframes scale {
  0% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.5) rotate(90deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

点击这里查看效果：动画示例

总结

CSS 提供了许多动画属性，可以为 Web 网页添加交互性和更好的用户体验。在实际应用中，使用动画属性需要注意控制其执行的时间和方向，避免对用户造成过多的干扰和不适。