导航：首页 > 开发技术 >

css3中animation动画属性怎么用

发表于：2024-11-11 作者：千家信息网编辑

千家信息网最后更新 2024年11月11日，这篇文章给大家介绍css3中animation动画属性怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。CSS主要是用于描绘网页的样式和布局而CSS3是最新的CSS标准，提供了

千家信息网最后更新 2024年11月11日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;

　　让一个小方块按照右下左上的方向进行运动

　　div　　{　　width:100px;　　height:100px;　　background:red;　　position:relative;　　animation:demo;　　animation-iteration-count：infinite;　　animation-duration:2s;　　animation-timing-function:ease;　　animation-delay:0.1s;　　animation-direction:alternate;　　｝　　/*SafariandChrome浏览器*/　　-webkit-animation:demo;/*设置动画名称*/　　-webkit-animation-iteration-count：infinite;/*动画执行次数*/　　-webkit-animation-duration:5s;/*动画花费时间*/　　-webkit-animation-timing-function:ease;/*动画速度*/　　-webkit-animation-delay:2s;/*动画延迟*/　　-webkit-animation-direction:alternate;/*动画是否反向*/　　}　　/*设置动画运行区域*/　　@keyframesdemo　　{　　0%{background-color:pink;left:0;top:40px;}　　25%{background-color:hotpink;left:300px;top:40px;}　　50%{background-color:yellow;left:300px;top:340px;}　　75%{background-color:blue;left:0;top:340px;}　　100%{background-color:green;left:0;top:30px;}　　}　　/*SafariandChrome浏览器*/　　@-webkit-keyframesdemo　　{　　0%{background-color:pink;left:0;top:40px;}　　25%{background-color:hotpink;left:300px;top:40px;}　　50%{background-color:yellow;left:300px;top:340px;}　　75%{background-color:blue;left:0;top:340px;}　　100%{background-color:green;left:0;top:30px;}　　}