CSS animation动画
CSS animation动画
参考网站:
https://www.w3school.com.cn/
https://v3.cn.vuejs.org/
你要做什么?
改变HTML中的DOM元素的属性。产生一个过渡的连续过程。
animation配置项
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
例:
animation: name duration timing-function delay iteration-count direction;
当然也可以单独设置每一项的属性。
很多属性可以用JS设置,通常就是属性的短横线-,换成驼峰命名法
例:
object.style.animationDelay="2s"
animation-name
animation-name 属性为 @keyframes 动画规定名称。
animation-duration
animation-duration属性定义动画完成一个周期所需要的时间,以秒或毫秒计。
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
animation-timing-function
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
值 | 描述 | 测试 |
---|---|---|
linear | 动画从头到尾的速度是相同的。 | 测试 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | 测试 |
ease-in | 动画以低速开始。 | 测试 |
ease-out | 动画以低速结束。 | 测试 |
ease-in-out | 动画以低速开始和结束。 | 测试 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
其中最强大的是cubic-bezier,也就是俗称的贝塞尔曲线函数。测试
animation-delay
animation-delay 属性定义动画何时开始。
可以是负数,这是就是提前开始动画。也就是减去动画时长。
animation-iteration-count
animation-iteration-count 属性定义动画的播放次数
一般输入数字就好了,如果要无限循环,设成"infinite"
animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。
normal,默认,正常播放动画。
alternate,反向播放。
animation-fill-mode
动画结束后,最后应该保留的样式,默认是还原成之前的样式。
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
- backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
animation-play-state
动画暂停和开始,配置项paused和running
@keyframes
定义了一套规则,从老的样式变到新的样式。
这里name需要配合另一个@keyframes
<style type="text/css">
.myclass{
animation: clip01 0.5s;
}
@keyframes clip01 {
from { background: red; }
to{background: yellow;}
}
</style>
这里我用类选择器myclass 里设置了animation-name和animation-duration。对应到clip01。
在0.5秒内背景颜色从红色变到黄色
开始效果:
结尾效果:
停止效果:
当然最后动画结束又变成白色的了。
可以按from to这种方式,也可单独设置百分比
例:
@keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }
不同浏览器
animation或keyframes属性前面带上前缀,安排不同浏览器内核的效果
-webkit-、-moz- 或 -o-
例:
-webkit-animation: clip01 0.5s;
最低支持的内核版本号。