CSS3简单动画_html/css_WEB-ITnose
程序员文章站
2022-05-31 14:26:02
...
css3的动画确实非常绚丽!浏览器兼容性很重要!。
分享两个小动画
C3动画
效果如本博客首页那两个小圆圈!
需要注意的是:
1、在css里创建动画时候要处理兼容性
2、在调用的时候不单要处理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;
还要注意animation:animation-name,animation-duration,animation-timing-function,animation-iteration-count
animation-name:是用来定义一个动画的名称
animation-duration是用来指定元素播放动画所持续的时间长,取值:为数值,单位为s (秒.)其默认值为“0”。
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式.
具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~
animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。