你的位置:首页 > 软件开发 > 网页设计 > animation 动画属性

animation 动画属性

发布时间:2017-01-20 12:00:15
animation-name: 选择器名称animation-duration: 完成动画所需时间animation-timing-function: 动画的速度曲线 值描述测试linear动画从头到尾的速度是相同的。测试ease默认。动画以低速开始,然后加快,在结束 ...

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>

原标题:animation 动画属性

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录