animation 动画属性

2018-06-24 00:54:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

animation-name:  选择器名称

animation-duration: 完成动画所需时间

animation-timing-function: 动画的速度曲线  

描述测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。  
 JavaScript 语法: object.style.animationTimingFunction="linear"  

animation-delay: 动画开始之前的延迟

animation-iteration-count: 播放的次数

animation-direction: 是否应该轮流反向播放动画

描述测试
normal 默认值。动画应该正常播放。 测试
alternate 动画应该轮流反向播放。 测试
CSS语法 animation-direction: normal|alternate;  

 

案例:

<!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 */
}

@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>

  

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Math中的floor,round和ceil方法总结

下一篇:选项卡制作