CSS3 _ CSS 动画 - 肉渣教程

首页 / HTML教程 / CSS教程 / JS教程 / jQuery教程 / Python教程 / Bootstrap教程

CSS 动画

上一节下一节

CSS 动画（Animation）

CSS动画（Animation）可以使HTML元素不借住JavaScript和Flash就动态起来。

反清

浏览器兼容性

下表是每种浏览器支持相应属性的最低版本，其中-ms-、-webkit-、-moz-、-o-这些前缀，指每种浏览器支持动画（Animation）属性的最低版本浏览器中，需要加上这些前缀，比如在5.0版本的Firefox浏览器中如果要想用animation属性，则需要写成-moz-animation属性；剩下的以此类推。

属性
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

什么是CSS动画（Animation）？

所谓动画就是让元素逐渐地从一种样式变成另外一种样式。而且随时可以设置相应的样式。为了使用CSS达到这种目的，故而需要先定义一些关键帧的样式，从而声明元素在具体何时该如何变化。

@keyframes 关键帧

如果把关键帧的样式定义在@keyframes内且指定元素应用此关键帧样式作为动画样式，指定元素就会在指定时间内按照动画样式设置的变化方式而变化。

案例1：让元素的背景色发生改变

如下例所示，div元素就会在4秒内逐渐从红色变成黄色。（当动画结束，则会瞬间变回元素本来的颜色绿色）

/* 具体的动画样式 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* 将上述的动画样式应用在此元素上 */
div {
    width: 100px;
    height: 100px;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
}

animation-duration属性是用来定义动画时长，如果不定义动画时长属性，则CSS动画不会生效，因为该属性默认为0，即意味着动画不会生效。

案例2：使用百分比来定义

上例中使用from代表0%时的动画样式，to代表100%时；而想更复杂详细地定义CSS动画不同时间点时的样式，也可以直接使用百分比来定义。具体案例如下所示：

/* 具体的动画样式 */
@keyframes example {
     0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* 将上述的动画样式应用在此元素上 */
div {
    width: 100px;
    height: 100px;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
}

案例3：让元素的位置发生改变

如果想要元素的位置也发生改变呢，那就把元素的位置属性变成relative，然后改变不同时刻该元素上下左右的距离偏移。具体如下所示：

/* 具体的动画样式 */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* 将上述的动画样式应用在此元素上 */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
}

案例4：CSS动画延迟2s生效

利用animation-delay属性定义一个延时，则CSS动画会在指定延时时长后生效。

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

案例5：CSS动画延时时长为负数

如果animation-delay属性定义的延时时长为负数，比如-2s，则意味着CSS动画直接跳过前2s来生效。

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}

设置CSS动画的重复次数

默认情况下，CSS动画干一遍就熄火了，那如果想让其多干几遍呢？使用animation-iteration-count即可。如下例所示，让CSS动画连续干3遍。

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

那如果想让CSS动画永远重复下去呢？直接把animation-iteration-count属性取值infinite就ok啦~

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

经脉逆行，神功自成

CSS动画不仅能按照设置顺着运行，还可以通过设置而倒着运行。控制动画运行的方向则是由animation-direction属性来决定。其取值范围如下：

normal - 动画顺着运行。（默认）
reverse - 动画倒着运行。
alternate - 动画先顺着运行、再倒着运行，周而复始，顺逆顺逆顺逆……
alternate-reverse - 动画先逆着运行、再顺着运行，周而复始，逆顺逆顺逆顺……

案例1：经脉逆行，倒着运行

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

案例2：经脉先顺后逆，周而复始

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 4;
    animation-direction: alternate;
}

案例3：经脉先逆后顺，周而复始

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: green;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 4;
    animation-direction: alternate-reverse;
}

控制动画的速度曲线

贫道之前展示的动画效果都是缓慢开始，然后变快，最后缓慢结束，那么如果想不一样呢呢？那就要说到animation-timing-function这个属性了。其取值范围如下所示：

ease - 动画效果的速度是缓慢开始，然后变快，最后缓慢结束（默认）
linear - 动画匀速变化
ease-in - 缓慢起步
ease-out - 缓慢结束
ease-in-out - 缓慢起步并缓慢结束
cubic-bezier(n,n,n,n) - 自定义速率变化

案例如下，试试呗~

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

设置动画结束后的元素样式

默认情况下，动画开始前，元素保持原有样式，动画结束后，元素瞬间恢复原有样式。这是因为animation-fill-mode属性默认为none，该属性是用来动画起始的元素样式，其取值范围如下：

none - 动画开始前，元素保持原有样式，动画结束后，元素瞬间恢复原有样式（默认）
forwards - 动画结束后，元素会保持CSS动画的最后一帧的样式
backwards - 动画开始前，元素会保持CSS动画的第一帧的样式（可以加animation-delay以看出效果）
both - 兼具forwards和backwards两者的功能

案例1：取值forwards

动画结束后，元素会保持CSS动画的最后一帧的样式。

div {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

案例2：取值backwards

动画开始前，元素会保持CSS动画的第一帧的样式（加animation-delay以看出效果）。

div {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

案例3：取值both

取值both，则兼具forwards和backwards两者的功能。动画开始前，元素会保持CSS动画的第一帧的样式。动画结束后，元素会保持CSS动画的最后一帧的样式。

div {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}

使用animation属性通吃

洒家先举一个例子，如下所示：

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

洒家是一个粗人，洒家是一个文盲，洒家没有文化，洒家是一个懒汉，洒家想少用一点属性名，于是洒家只用animation属性通吃了上述所有属性，于是乎，如下所示：

div {
    animation: example 5s linear 2s infinite alternate;
}

CSS 动画

上一节下一节

Copyright © 肉渣教程 rouzha.cn