介绍动画:名字时间定时功能延迟迭代计数方向; & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; style>
div
{
宽度:100 px;
身高:100 px;
背景:红色;
位置:相对;
动画:mymove 5 s无限;
-webkit-animation: mymove 5 s无限;/* Safari和Chrome */}
@keyframes mymove
{
从{左:0 px;}
{左:200 px;}
}
@-webkit-keyframes mymove/* Safari和Chrome */{
从{左:0 px;}
{左:200 px;}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p> & lt; strong>注释:& lt;/strong> Internet Explorer 9以及更早的版本不支持动画属性。;/p>
& lt; div> & lt;/div>
& lt;/body>
& lt;/html>
这篇文章主要介绍了css3动画中属性的使用方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
css3动画属性是一个简写属性,通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称,动画时间,速度曲线,动画延迟,播放次数及动画是否反向播放。
<强>作用:动画属性是一个简写属性,用于设置六个动画属性。
<强>语法:
<强>说明:动画属性可以设置的六个动画属性分别为:
●animation-name:规定需要绑定到选择器的关键帧名称。
●动画:规定完成动画所花费的时间,以秒或毫秒计。
●animation-timing-function:规定动画的速度曲线。
●animation-delay:规定在动画开始之前的延迟。
●animation-iteration-count:规定动画应该播放的次数。
●动画方向:规定是否应该轮流反向播放动画。
注:需始终设置动画属性,否则当时长为0时,就不会播放动画了。
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享css3动画中属性的使用方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
