首页 > 代码库 > animation几个比較好玩的属性(alternate,及animation-fill-mode)

animation几个比較好玩的属性(alternate,及animation-fill-mode)

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
animation-fill-mode: both;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>凝视:</b>本例在 Internet Explorer 中无效。

</p>

<div></div>

</body>
</html>  这是摘自w3school的一段关于keyframes的代码,大家有兴趣的能够看一下,

http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes

大家能够看到一个红色正方形,从上方运动到以下。再高速回到上面,再按animation:5s;从上面运动到下方,这样周而复始.那么在这个里面起关键的是keyframes,定义了动画,而animation:infinite 5s;则定义了动画效果。当中infinite代表的是循环,周而复始的这个过程。去掉这个,我们则看到红色正方形缓缓下来之后再高速回到上面后就不再动了。

那么我们想使正方形运动一次后留在以下,应该怎样处理,这就是animation-fill-mode的作用。我今天在teambition站点上看到了他们的导航条的效果便是利用了这个,依据w3,animation-fill-mode有四个属性,none,forwards,backwards,both,当中none和forwards使得运动物体动画结束后回到动画前的状态,而both和forwards则使运动物体在动画结束后保留动画结束前最后一帧的效果。因此如 果我们希望正方形运动一次后停在下方,则须要使用animation-fill-mode这个属性。

而alternate则是达到往返效果,我们在实现摆钟动画时往往可能须要这个,我们不可能希望摆钟从左摆到右是一个我们确定的频率。从右摆到左又是一个急速的状态,没有保持一致。

这样视觉上会大打折扣,大家能够在这个红色正方形上实验一下。

譬如animation:mymove 5s infinite;变为 animation:mymove 5s infinite alternate;

来实际观察一下效果。

如有问题请及时告诉我。大家共同学习啦。


animation几个比較好玩的属性(alternate,及animation-fill-mode)