[email protected] ，相信小伙伴们对这个话题应该有所关注吧，[email protected] 的相关资料，希望小伙伴们看了有所帮助。
css动画css动画允许大多数html元素的动画，而无需使用Javascript或Flash！
动画浏览器支持IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。
什么是css动画？动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的css属性。要使用css动画，必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。
@keyframes规则[email protected]，[email protected]�要使动画生效，必须将动画绑定到元素。以下示例将“example”动画绑定到<div>元素。动画将持续4秒，并且会逐渐将<div>元素的背景颜色从“红色”更改为“×××”：
@keyframes example { from {background-color: red;} to {background-color: yellow;}}div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s;}注意：该animation-duration属性定义动画完成所需的时间。如果animation-duration未指定该属性，则不会发生动画，因为默认值为0（0秒）。 在上面的示例中，我们通过使用关键字“from”和“to”（表示0％（开始）和100％（完成））指定样式何时更改。也可以使用百分比。通过使用百分比，您可以根据需要添加任意数量的样式更改。当动画完成25％，完成50％时，以及动画100％完成时，以下示例将更改<div>元素的背景颜色：
@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: red; animation-name: example; animation-duration: 4s;}以下示例将在动画完成25％，完成50％时再次更改背景颜色和<div>元素的位置，并在动画完成100％时再次更改：
@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: red; animation-name: example; animation-duration: 4s;}##延迟动画animation-delay属性指定动画开始的延迟。以下示例在开始动画之前有2秒的延迟：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: 2s;}也允许负值。如果使用负值，动画将像已经播放N秒一样开始。在以下示例中，动画将像已经播放2秒一样开始：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: -2s;}设置动画应运行多少次animation-iteration-count属性指定动画应运行的次数。以下示例将在停止之前运行动画3次：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3;}以下示例使用值“infinite”使动画永远继续：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite;}以反向或备用循环运行动画animation-direction属性指定动画是应该向前，向后还是以交替周期播放。 animation-direction属性可以具有以下值：normal - 动画正常播放（前进）。这是默认的reverse - 动画以反向播放（向后）alternate - 动画首先向前播放，然后向后播放alternate-reverse - 首先向后播放动画，然后向前播放动画以下示例将以反向（向后）运行动画：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-direction: reverse;}以下示例使用值“alternate”使动画首先向前运行，然后向后运行：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate;}以下示例使用值“alternate-reverse”使动画首先向后运行，然后向前运行：
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate-reverse;}指定动画的速度曲线animation-timing-function属性指定动画的速度曲线。 animation-timing-function属性可以具有以下值：ease - 指定慢启动的动画，然后快速，然后缓慢结束（这是默认设置）linear - 指定从开始到结束具有相同速度的动画ease-in - 指定启动慢的动画ease-out - 指定慢速结束的动画ease-in-out - 指定开始和结束较慢的动画cubic-bezier(n,n,n,n) - 允许您在cubic-bezier函数中定义自己的值以下示例显示了可以使用的一些不同速度曲线：
#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;}为动画指定填充模式css动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。animation-fill-mode属性可以覆盖此行为 animation-fill-mode动画未播放时（在开始之前，结束之后或两者都有），该属性指定目标元素的样式。 animation-fill-mode属性可以具有以下值：none- 默认值。动画在执行之前或之后不会对元素应用任何样式forwards - 元素将保留由最后一个关键帧设置的样式值（取决于animation-direction和animation-iteration-count）backwards - 元素将获取由第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留此值both - 动画将遵循向前和向后的规则，在两个方向上扩展动画属性以下示例允许<div>元素在动画结束时保留最后一个关键帧的样式值：
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-fill-mode: forwards;}以下示例允许<div>元素获取动画开始前（动画延迟期间）第一个关键帧设置的样式值：
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards;}以下示例允许<div>元素在动画开始之前获取由第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: both;}动画简写属性下面的示例使用了六个动画属性：
div { animation: example 5s linear 2s infinite alternate;}[email protected]��性：
[email protected]��[email protected][email protected][email protected]�[email protected]��式(在动画开始前、结束后或同时播放)animation-iteration-count指定动画播放的次数animation-nam[email protected]��[email protected]��线来源：爱蒂网
