animation几个比較好玩的属性(alternate,及animation-fill-mode)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了animation几个比較好玩的属性(alternate,及animation-fill-mode)相关的知识，希望对你有一定的参考价值。
<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)的主要内容，如果未能解决你的问题，请参考以下文章
Android MarginLeft与MarginStart的差别