欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

animation相关属性 @keyframes动画效果的实现

程序员文章站 2022-03-16 16:49:10
...

animation相关属性

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
@keyframes
1.animation-name指定@keyframes的名字,CSS加载时会应用该名字的@keyframes规则来实现动画

**2.**animation-duration动画持续时间,默认是0表示无动画,单位可以设s秒或ms毫秒

**3.**animation-timing-function动画播放方式,默认值ease,可以设linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps。关于贝塞尔曲线和steps可以参照上一篇transition,和transition-timing-function类似,不多赘述。

**4.**animation-delay延迟开始动画的时间,默认值是0,表示不延迟,立即播放动画。单位是s秒或ms毫秒。允许设负时间,意思是让动画动作从该时间点开始启动,之前的动画不显示。例如-2s 使动画马上开始,但前 2 秒的动画被跳过。

5.animation-iteration-count动画循环播放的次数,默认值为1,即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

6.animation-direction动画播放的方向,可设normal,alternate,alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画,即动画会在奇数次(1,3,5…)正常播放,而在偶数次(2,4,6…)反向播放。alternate-reverse正好反过来,奇数次反向播动画,偶数次正向播动画。看效果点这里

.myDiv1 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:aDirection 5s infinite;  //指定keyframes: aDirection  css加载该名字的@keyframes规则来实现动画
} 
@keyframes aDirection {    
    from {left:0px;}
    to {left:200px;}
}
.alter { animation-direction:alternate; }
.alterR { animation-direction:alternate-reverse; } 

<div class="myDiv1"></div>
<div class="myDiv1 alter"></div>
<div class="myDiv1 alterR"></div> 

其实例子页面就能看到alternate/alternate-reverse的动画效果可以平滑地实现反转效果。例如例子页面中闪烁提示的例子。你可以用text-decoration: blink来实现闪烁,但它的功能有限支持有限。用CSS3动画实现的闪烁效果更棒。(当然闪烁的使用必须克制,要定时定次数,不能无限闪。无限闪通常会让用户很生气后果很严重):

@keyframes blink { 
    to { color: transparent }   //文字色平滑过渡到透明
}
.blink {
    animation: .5s blink 6; //触发动画6次,因为设了alternate,所以看上去闪烁了3次
    animation-direction: alternate;
}

animation-play-state动画的状态,可设running,paused。默认值running表示正在播放动画,paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。

animation-fill-mode动画的时间外属性,可设none,forwards,backwards,both。默认值none表示动画播完后,恢复到初始状态。forwards当动画播完后,保持@keyframes里最后一帧的属性。backwards表示开始播动画时,应用@keyframes里第一帧的属性,要看出效果,通常要设animation-delay延迟时间。both表示forwards和backforwards都应用。

例如设置2s的延迟时间。初始为红色,第一帧动画变为绿色,最后一帧动画变为蓝色。

.myDiv2 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:mymove 5s 1 2s;
}
@keyframes mymove {
    from {left:0px; background-color:green;}
    to {left:200px; background-color: blue;}
}
.forwards { animation-fill-mode:forwards; }
.bkforwards { animation-fill-mode:backwards; }
.both { animation-fill-mode:both; } 

<div class="myDiv2"></div>
<div class="myDiv2 forwards"></div>
<div class="myDiv2 bkforwards"></div>
<div class="myDiv2 both"></div>

图1不解释了,最正常的效果,初始为红色,动画开始成绿色,动画结束成蓝色,结束后恢复初始状态红色。图2设成forwards,和图1的区别是动画结束后不恢复初始状态,仍旧是蓝色。图3设成backwards,在动画开始前(即延迟时间段内)应用第一帧的动作,设成了绿色,动画结束后恢复原始状态。图4设成both兼具forwards和backwards的效果。

@keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的,而在animation中用@keyframes可以细致地指定第一帧要干什么,第二帧要干什么。

语法:@keyframes开头,后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%,to等于100%。

@keyframes mymove {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;} 
}

为节约篇幅,各种浏览器前缀均省略,如Firefox用@-moz-keyframes,Chrome和Safari用@-webkit-keyframes,Opera用@-o-keyframes。提醒一下@keyframes只是定义了一个动画效果,但要使动画生效,必须用animate属性将动画绑定到具体某DOM元素上才行。

你可以单独指定上面这些子属性,也可以像background等属性一样,合并在animation属性里指定。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并时要注意,因为有animation-duration和animation-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为animation-duration,第二个时间认作为animation-delay。

分开指定可能代码清晰点,但因为页面需要适应各浏览器时,每个都要加上-ms,-moz等前缀的话代码会变的很多,合并在一起代码稍微少点。

另外也可以同时指定多个动画效果,例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

总结
animation的参数不算多,但知道理论是一回事,能否写出精妙的动画效果是另一回事。除非你特有天赋,否则可以借鉴牛人们的设计。例如Dan Eden的animate.css动画库,里面设计出的贝塞尔曲线能让动画效果非常逼真。

CSS3里三大动画相关属性transform,transition,animation基本内容就介绍完了。有些子属性如果不明白原理的话,代码给你都很难改,更别说自己写。现在看到酷炫的动画效果,可以试着看看源码,并对照着改成自己想要的效果。下一篇将介绍一些常见实用的动画效果。

转载