CSS动画
CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash !
动画浏览器支持
IE10 +支持该属性的。其他低浏览器版本数字后跟- ms - webkit - -moz -或- o -指定使用前缀的第一个版本。
什么是CSS动画?
动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画,必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。
@keyframes规则
在@keyframes规则中指定CSS样式时,动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效,必须将动画绑定到元素。以下示例将“例子”动画绑定到& lt; div>元素。动画将持续4秒,并且会逐渐将& lt; div>元素的背景颜色从“红”色更改为“×××”:
<代码>/*动画代码*/{@keyframes例子
从{背景颜色:红色;}
{背景颜色:黄色;}
}/*要将动画应用到的元素*/div {
宽度:100 px;
身高:100 px;
背景颜色:红色;
animation-name:例子;
动画:4 s;
}
注意:该动画属性定义动画完成所需的时间。如果动画未指定该属性,则不会发生动画,因为默认值为0(0秒)。在上面的示例中,我们通过使用关键字”从“和”到“(表示0%(开始)和100%(完成))指定样式何时更改。也可以使用百分比。通过使用百分比,您可以根据需要添加任意数量的样式更改。当动画完成25%,完成50%时,以及动画完100%成时,以下示例将更改& lt; div>元素的背景颜色:
<代码>/*动画代码*/{@keyframes例子
0%{背景颜色:红色;}
25%{背景颜色:黄色;}
50%{背景颜色:蓝色;}
100% {background:绿色;}
}/*将动画应用到元素*/div {
宽度:100 px;
身高:100 px;
背景颜色:红色;
animation-name:例子;
动画:4 s;
}
以下示例将在动画完成25%,完成50%时再次更改背景颜色和& lt; div>元素的位置,并在动画完成100%时再次更改:
<代码>/*动画代码*/{@keyframes例子
0%{背景颜色:红色;左:0 px;上图:0 px;}
25%{背景颜色:黄色;左:200 px;上图:0 px;}
50%{背景颜色:蓝色;左:200 px;上图:200 px;}
75%{背景颜色:绿色;左:0 px;上图:200 px;}
100%{背景颜色:红色;左:0 px;上图:0 px;}
}/*将动画应用到元素*/div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
}
# #延迟动画
animation-delay属性指定动画开始的延迟。以下示例在开始动画之前有2秒的延迟:
<代码> div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
animation-delay: 2 s;
}
也允许负值。如果使用负值,动画将像已经播放N秒一样开始。在以下示例中,动画将像已经播放2秒一样开始:
<代码> div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
animation-delay: 2 s;
}
设置动画应运行多少次
animation-iteration-count属性指定动画应运行的次数。以下示例将在停止之前运行动画3次:
<代码> div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
animation-iteration-count: 3;
}
以下示例使用值“无限”使动画永远继续:
<代码> div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
animation-iteration-count:无限;
}
以反向或备用循环运行动画
动画方向属性指定动画是应该向前,向后还是以交替周期播放。动画方向属性可以具有以下值:
正常——动画正常播放(前进)。这是默认的
反向-动画以反向播放(向后)
交替-动画首先向前播放,然后向后播放
alternate-reverse -首先向后播放动画,然后向前播放动画
以下示例将以反向(向后)运行动画:
<代码> div {
宽度:100 px;
身高:100 px;
位置:相对;
背景颜色:红色;
animation-name:例子;
动画:4 s;
动画方向:反向;
} CSS动画@keyframes的用法
