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
(#换成@)。