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

要使用animation动画，先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。不同关键帧是通过From（相当于0%）、to（相当于100%）或百分比来表示（为了得到最佳的浏览器支持，建议使用百分比），如下定义一个简单的动画：

@keyframes定义好了，要使其能发挥效果，必须通过animation把它绑定到一个选择器，否则动画不会有任何效果。下面列出了animation的属性：

下面设置上述的所有属性

上述所有代码可以如下简写：

浏览器兼容性

internet Explorer 10、Firefox 以及 opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

下面给出上面介绍的关于keyframes和animation属性的完整代码示例：

上面代码演示了一个正方形沿着一个正方形轨迹运动，基数次按正方向运动，偶数次按反方向运动，运动过程中还带有颜色变化。具体效果，读者可以自行运行代码观察。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

脚本宝典总结

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

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

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