肉渣教程

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 - 兼具forwardsbackwards两者的功能


案例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 动画

上一节 下一节