大佬教程收集整理的这篇文章主要介绍了Htnl5 animation详解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
1. @keyframe
<!doctype html> <html> <head> <Meta charset="utf-8"> <title>无标题文档</title> <style> div{ width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst{ from {background:red;} to{background:yellow;} } @-moz-keyframes myfirst{ from {background:red;} to{background:yellow;} } @-webkit-keyframes myfirst{ from {background:red;} to{background:yellow;} } @-o-keyframes myfirst{ from {background:red;} to{background:yellow;} } </style> </head> <body> <div></div> </body> </html>
animation: myfirst 5s linear 2s infinite alternate;
解释为： myfirst div 动画播放5s,从头到尾的速度是相同的，从第2s 开始播放，无限播放。
参数介绍：
animation-name:myfirst;
<a target=_blank title="CSS3 animation-duration 属性" href="http://www.w3school.com.cn/cssref/pr_animation-duration.asp">animation-duration</a>:5s 动画完成所用的时间，默认是0
animation-timing-function: linear 规定动画的速度曲线 默认是“ease” ; linear:动画从头到尾的速度是相同的。ease:默认，动画以低速开始，然后加快，结束前变慢。 ease-in:动画以低速开始 ease-out:动画以低速结束 ease-in-out:动画以低速开始和结束。
animation-delay:2s; 规定动画什么时候开始，允许负值
<a target=_blank title="CSS3 animation-iteration-count 属性" href="http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp">animation-iteration-count</a>：规定动画播放的次数，默认是1 infinite：无限播放
animation-direction:alternate; normal 默认值，正常播放。 alternate 动画应该轮流反向播放
<a target=_blank title="CSS3 animation-play-state 属性" href="http://www.w3school.com.cn/cssref/pr_animation-play-state.asp">animation-play-state</a> 属性规定动画正在运行还是暂停， paused:规定动画已经暂停。 running：规定动画正在播放。
<a target=_blank title="CSS3 animation-fill-mode 属性" href="http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp">animation-fill-mode</a>：规定对象动画时间之外的状态。
以上是大佬教程为你收集整理的Htnl5 animation详解全部内容，希望文章能够帮你解决Htnl5 animation详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。