CSS 对动画的支持

CSS3 中内置对动画中的支持,这使得我们不需要使用动画图片、Flash或者Javascript 就可以在页面上实现丰富的动画。

基本定义

让我们先来看一个最简单的例子,我们首先在页面上定义一个矩形

1
<div class="anmi"></div>

并使用如下的CSS:

1
2
3
4
5
.anmi {
width: 100px;
height: 100px;
background-color: blue;
}

在浏览器上展示这段代码,将看到一个大小为 100x100 的,蓝色的矩形。当然,现在是不会动的。 接下来,我们加入 CSS 动画。

首先,我们在 anmi 选择器中加入如下动画定义,代码如下:

1
2
3
4
5
6
7
.anmi-1 {
width: 100px;
height: 100px;
background-color: blue;
animation-name: anmi-css-1;
animation-duration: 10s;
}

可以看到,我们加入了两个属性,animation-name 定义了动画的名称,这里命名为: anmi-css-1, 另一个参数 animation-duration 定义了该动画执行的时间(为了便于观察代码的执行效果,我们将动画定义的时长定义得比较长: 10s)。 那动画到底怎么过”动”呢?

这需要加入一个新的 css 规则: @keyframes, 该规则用来定义动画的不同阶段(状态)。比如我们加入一个简单的 @keyframes。如下:

1
2
3
4
5
6
7
8
@keyframes anmi-css-1 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

首先,我们为上面的 @keyframes 定义了名称,这个名称应该和在 animation-name 定义的一直(实际上选择器 .anmi-1 就是通过 animation-name 来引用 @keyframes 的)。在 @keyframes 中,我们简单的定义了 from 和 to 两个状态,分别表示动画开始时和动画结束时的 HTML 元素(案例中就是 .anmi-1 选择的 div)的状况。

在浏览器中观察运行结果就可以看到一个淡入的效果了。

对于 @keyframes ,我们也可以使用百分比的方式来定义更多的动画阶段,比如上面案例的 @keyframes 可以定义为

1
2
3
4
5
6
7
8
@keyframes anmi-css-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

当然,也可以增加更多的阶段:

1
2
3
4
5
6
7
8
9
10
11
@keyframes anmi-css-1 {
0% {
opacity: 0;
}
50% {
background-color: red;
}
100% {
opacity: 1;
}
}

动画属性

在上面的例子中,我们使用了动画的 animation-name 和 animation-duration 属性。其实动画一些属性,可以提供更多的控制。

  1. animation-delay - 用于延迟动画开始的时间

  2. animation-iteration-count - 用于控制动画执行的次数,infinite 为无限次

  3. animation-direction - 是都反向播放动画,可以提供正向,反向交错的播放效果

  4. animation-fill-mode - 当动画结束时,H5元素的状态

  5. animation-timing-function - 定义动画执行时的速度曲线

本文标题:CSS 对动画的支持

文章作者:梅老师

发布时间:2020年04月16日 - 19:04

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/h5/css-animation-1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。