动画 CSS

CSS 动画是在网页中创建动态效果的一种方法。该技术使用 CSS 属性来定义动画的外观和行为。通过在 CSS 中编写动画代码，我们可以创建各种各样的动画效果，如淡入淡出、旋转、缩放、移动等。

实现原理

CSS 动画是通过使用 CSS 属性来设置动画的关键帧。关键帧是指动画开始、结束、或者在动画过程中其他任意时间点的状态。在动画过程中，浏览器根据这些关键帧逐步改变元素的样式，从而实现动画效果。

语法

CSS 动画需要使用 @keyframes 规则及其关键帧来定义动画过程。下面是一个基本的例子：

@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
}

在这个例子中，我们定义了一个名为 example 的动画，该动画从蓝色背景逐渐转变为红色背景。动画的起点是 from，终点是 to。

然后，我们需要使用 animation 属性来将动画绑定到指定元素，如下所示：

div {
  animation-name: example;
  animation-duration: 4s;
}

在这个例子中，我们将名为 example 的动画绑定到 div 元素上。animation-duration 属性指定动画的时长为 4 秒。

属性

CSS 动画支持多种属性，可用于控制动画的行为和外观。下面是一些常用的属性：

• animation-name：指定要绑定的动画名称。
• animation-duration：指定动画的时长。
• animation-delay：指定动画开始前的延迟时间。
• animation-direction：指定动画是正向（normal）还是反向（reverse）播放。
• animation-fill-mode：指定动画在播放前后的样式状态。
• animation-iteration-count：指定动画的重复次数。
• animation-play-state：指定动画的播放状态。
• animation-timing-function：指定动画的时间函数。

可兼容性

CSS 动画在现代浏览器中基本都有良好的支持。IE9 及以下版本的 Internet Explorer 浏览器不支持动画。

示例

我们可以使用 CSS 动画来实现各种各样的动画效果，比如下面这个例子：

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fadein {
  animation-name: fadein;
  animation-duration: 2s;
}

在这个例子中，我们定义了一个名为 fadein 的动画，该动画让元素逐渐显示。我们使用 opacity 属性来控制元素的不透明度。动画时长为 2 秒。

为了让某个元素使用这个动画，只需要在元素的 class 属性中添加 fadein 即可：

<div class="fadein">Hello, world!</div>

在这个例子中，我们将名为 fadein 的动画绑定到一个 div 元素上。元素将在 2 秒内逐渐显示。