css3中的动画属性有哪些
这篇文章主要为大家展示了“css3中的动画属性有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中的动画属性有哪些”这篇文章吧。
成都创新互联主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务林口,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
css3的动画属性
1、animation-name属性
animation-name属性:定义动画名称,用于指定由规则定义的动画的一个或多个名称。
注:animation-name属性必须与规则@keyframes配合使用,因为动画名称是由@keyframes定义声明的,如果提供多个属性值用逗号隔开。
@keyframes规则相当于一个命名空间,后面跟一个名词,如果在class中的animation-name定义了与之对应的name就可以执行动画。
2、animation-duration属性
animation-duration属性用于指定执行一个周期动画应该花多长时间。
时间以秒或毫秒指定,并且最初设置为“0”,这意味着动画即时发生;我们可以指定一个持续时间或多个以逗号分隔的持续时间。
3、animation-timing-function属性
animation-timing-function属性是用来设置播放方式的,它可以指定定时函数,该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展,允许它在其过程中改变速度。
取值如下:
ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
linear:线性效果,速度将从开始到结束稳定。
ease-in:渐显效果,动画将缓慢启动,然后获得更多加速并稳定到持续时间结束。
ease-out:渐隐效果,动画将快速启动,然后减速并稳定到持续时间结束。
ease-in-out:渐显渐隐效果,它是组合了ease-in和ease-out。动画或过渡将开始缓慢,在中间加速,然后减速直至结束。
step-start:马上跳转到动画结束状态,动画或过渡将突然变为结束状态并保持在该位置直到动画结束。
step-end:动画或过渡保持其开始状态,直到动画执行结束,直接跳转到其动画结束状态。
step(
step()可以将转换的持续时间划分为相等大小的间隔;或指定输出百分比的变化是发生在间隔的开始还是结束。
第一个参数number为指定的间隔数,即把动画分为n步阶段性显示,第二个参数默认为end,设置最后一步状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,以animation-fill-mode的设置为动画结束状态。
1.png
cubic-bezier(,,,):特殊的立方赛贝尔曲线效果
4、animation-delay属性
animation-delay属性:定义动画何时开始(开始时间),它允许动画在应用后的某个时间开始执行,或者在应用之前看似已经开始执行一段时间。
初始值为“0”,这意味着动画将在应用于元素后立即开始播放。正时间值表示偏移量,该偏移量定义动画开始之间(通过动画属性将动画应用于元素时)与开始执行时的延迟时间。
我们还可以为animation-delay提供负值。负值,就像'0'一样,意味着动画一旦被应用,就会立即执行,但是由延迟的绝对值自动推进,就好像动画在过去已经启动了指定的时间,并且它似乎已经在其游戏周期的中途开始了。例如,如果为animation-delay提供“-2S”的值,动画将立即启动,只要它被应用,但它将显示为它已经启动2s之前,你已经应用它。
5、animation-iteration-count属性
animation-iteration-count属性:用于指定动画停止前播放动画循环的次数,即:播放次数。
初始值为“1”,表示动画将从头到尾播放一次;通常会取“infinite”值,表示无限循环播放。
6、animation-direction属性
animation-direction属性:用于指定动画是否应在某些或所有循环或迭代中反向播放,即:播放方向。
该属性可能取的值:
normal:正常方向
reverse:动画反向运行,方向始终与normal相仿
alternate:动画会循环正反交替运动
7、animation-fill-mode属性
animation-fill-mode属性定义动画在播放后的状态。更具体地说,它定义了在动画延迟时间内以及动画完成执行后应用于元素的样式。
该属性可能取的值:
none:默认值,不设置样式
forwards:结束后保持动画结束的状态
backwards:结束后返回动画开始时状态
both:结束后可遵循forwards和backwards两个规则
8、animation-play-state属性
animation-play-state属性:用于检索或设置对象动画的状态,即:指定CSS动画是正在运行还是暂停。
该属性可能取的值:
running:默认值,运动;
paused:暂停。
我们也可以使用动画的简写属性animation属性来一次性设置动画的样式:
/*一个动画定义的语法*/
animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];
/*两个动画定义,用逗号隔开*/
animation:animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state],
[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];
css3动画属性和@keyframes规则创建简单动画:
代码实例:
HTML代码:
php中文网
css代码:
@importurl(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body{
background-color:#F5F5F5;
color:#555;
font-size:1.1em;
font-family:'GentiumBasic',serif;
}
.container{
margin:50pxauto;
max-width:700px;
}
.text{
font-size:3em;
font-weight:bold;
color:#009966;
-webkit-transform-origin:leftcenter;
-ms-transform-origin:leftcenter;
transform-origin:leftcenter;
-webkit-animation:fall4sinfinite;
animation:fall4sinfinite;
}
@-webkit-keyframesfall{
from,15%{
-webkit-transform:rotate(0)translateX(0);
transform:rotate(0)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
}
50%,60%{
-webkit-transform:rotate(90deg)translateX(0);
transform:rotate(90deg)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);
animation-timing-function:cubic-bezier(.13,.84,.82,1);
}
85%,to{
-webkit-transform:rotate(90deg)translateX(200px);
transform:rotate(90deg)translateX(200px);
opacity:0;
}
}
@keyframesfall{
from,15%{
-webkit-transform:rotate(0)translateX(0);
transform:rotate(0)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
}
50%,60%{
-webkit-transform:rotate(90deg)translateX(0);
transform:rotate(90deg)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);
animation-timing-function:cubic-bezier(.13,.84,.82,1);
}
85%,to{
-webkit-transform:rotate(90deg)translateX(200px);
transform:rotate(90deg)translateX(200px);
opacity:0;
}
}
以上是“css3中的动画属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章名称:css3中的动画属性有哪些
标题URL:http://ybzwz.com/article/jocpgo.html