CSS动画——使元素逐渐从一种样式变为另一种样式
@keyframes 规则
在特定时间逐渐从当前样式更改为新样式
语法
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
注意:animation-duration
属性定义需要多长时间才能完成动画。如果未指定 animation-duration
属性,则动画不会发生,因为默认值是 0s(0秒)。
下面的例子将在动画完成 25%,完成 50% 以及动画完成 100% 时更改
元素的背景颜色:
<style>
/* 动画代码 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* 应用动画的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
延时动画——animation-delay
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s; /*延时两秒*/
}
</style>
动画运行次数——animation-iteration-count
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;/*运行3次*/
}
</style>
animation-iteration-count: infnite——动画永远持续
反向或交替运行动画
animation-direction
属性指定是向前播放、向后播放还是交替播放动画。
值:
-
normal - 动画正常播放(向前)。默认值
-
reverse - 动画以反方向播放(向后)
-
alternate - 动画先向前播放,然后向后
-
alternate-reverse - 动画先向后播放,然后向前
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;/*先向前再向后*/
}
</style>
动画的速度曲线
animation-timing-function 属性规定动画的速度曲线。
值:
-
ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
-
linear - 规定从开始到结束的速度相同的动画
-
ease-in - 规定慢速开始的动画
-
ease-out - 规定慢速结束的动画
-
ease-in-out - 指定开始和结束较慢的动画
-
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
<style>
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
</style>
动画的填充模式——animation-fill-mode
规定动画播放前与播放后的形态
值:
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
- backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
</style>
动画简写属性
<style>
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/*用animation简写*/
div {
animation: example 5s linear 2s infinite alternate;
}
</style>