脚本宝典收集整理的这篇文章主要介绍了css中amimation 的用法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

css3 animation属性

   animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，可以让很多其它CSS属性产生动画效果，比如color, background-color, height， width等。当然，你需要为每个动画定义@keyframes CSS规则，animation需要调用这些@keyframes产生动画效果。在 CSS3 中是由属性keyframes来完成逐帧动画的。

animation合写语法:

@keyframes语法格式:

(其中form,to与0%，100%的效果相同，两指中间可以插入例如10%，25%，50%等 .   animationName  就是我们为keyframes取得名字,会应用到后面的animation选择中 .)

animation 属性可以设置的六个动画分写属性分别为：

注：需始终设置 animation-duration 属性，否则当时长为 0时，就不会播放动画了。

说明:1.动画的名称是由Keyframes创建的动画名，这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

2、animation-durationanimation-duration: time (s) animation-duration是指定元素播放动画所持续的时间，取值为数值，单位为秒(s)，其默认值为“0”。

3、animation-timing-functionanimation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)animation-timing-function是用来指定动画的播放方式，具有以下六种变换方式：ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

4、animation-delayanimation-delay: time(s)animation-delay:是用来指定元素动画开始时间。取值为数值，单位为秒(s)，其默认值为“0”。这个属性和animation-duration使用方法是一样的。

5、animation-ITeration-countanimation-iteration-count:infinite || numberanimation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。

6、animation-directionanimation-direction: normal || alternateanimation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。

脚本宝典总结

以上是脚本宝典为你收集整理的css中amimation 的用法全部内容，希望文章能够帮你解决css中amimation 的用法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。