animation-timing-function
animation-timing-function规定动画的速度曲线。默认是 “ease”。
语法
animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
值
| 值 | 描述 |
|---|---|
| linear | 定义以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 定义慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 定义以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 定义以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 定义以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
例子
HTML
<div class="stage"> <figure class="ball"></figure> </div>
CSS
@keyframes 'slide' {
from {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
to {
left: 488px;
top: 0;
}
}
.stage {
height: 150px;
position: relative;
min-width: 550px;
}
.stage .ball {
animation-name: slide;
animation-duration:2s;
animation-timing-function: ease-in-out;//动画的播放方式
animation-delay: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.ball {
background: red;
border-radius: 50%;
height: 40px;
position: absolute;
width: 40px;
}
执行结果