css3中animation动画属性怎么用

这篇文章给大家介绍css3中animation动画属性怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
　　CSS主要是用于描绘网页的样式和布局而CSS3是最新的CSS标准，提供了更多的方法而且使用CSS3，可以创建动画，使网页内容更加丰富今天将和大家分享css3中的动画属性——animation
　　注意在使用过程中浏览器兼容问题
　　InternetExplorer10、Firefox以及Opera支持animation属性。
　　Safari和Chrome支持-webkit-animation属性
　　所以在写程序的过程中应考虑到浏览器兼容问题
　　animation属性
　　用于设置六个动画属性：
　　（1）animation-name：规定动画的名称。
　　animation-name:demo//InternetExplorer10、Firefox以及Opera浏览器中
　　-webkit-animation-name:demo//Safari和Chrome
　　（2）animation-duration：完成动画所花费的时间（以秒和毫秒为单位）
　　animation-duration：3s；
　　-webkit-animation-duration:3s;
　　（3）animation-timing-function：动画速度曲线
　　linear：以匀速播放
　　ease：刚开始动画速度慢然后加快在结束时变慢（默认）
　　ease-in：指动画以低速开始
　　ease-out：指动画以低速结束。
　　ease-in-out：动画以低速开始和结束
　　cubic-bezier(n,n,n,n)：在cubic-bezier函数中设置想要的值，是从0到1的数值
　　animation-timing-function：ease；
　　-webkit-animation-timing-function:ease;
　　免费云主机、域名（4）animation-delay：动画开始延迟时间
　　animation-delay：3s；
　　-webkit-animation-delay:3s;
　　（5）animation-iteration-count：动画播放的次数
　　n:自定义动画播放次数的数值
　　infinite：指动画无限次循环播放
　　animation-iteration-count：4；//循环四次
　　-webkit-animation-iteration-count:infinite;//循环无数次
　　（6）animation-direction：动画是否轮流反向播放
　　normal动画应该正常播放（默认）
　　alternate动画应该轮流反向播放
　　animation-direction：normal;
　　-webkit-animation-direction:alternate;
　　让一个小方块按照右下左上的方向进行运动

1.行内样式，最直接最简单的一种，直接对HTML标签使用style=””。2.内嵌样式，就是将CSS代码写在之间，并且用进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上关于css3中animation动画属性怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

相关推荐: bootstrap默认字体大小是什么

这篇文章主要介绍“bootstrap默认字体大小是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“bootstrap默认字体大小是什么”文章能帮助大家解决问题。 bootstrap默认字体大小是“14px”；Boot…