CSS animation-timing-function 属性值说明
| 值 | 描述 |
|---|---|
| ease | 动画慢慢开始，然后变得更快，慢慢结束。这是默认值。 |
| linear | 动画以相同的速度开始。 |
| ease-in | 动画开始缓慢，但最终变得更快，突然停止。 |
| ease-out | 动画开始很快，但最后减慢了。 |
| ease-in-out | 动画慢慢开始，慢慢结束。 |
| step-start | 等于1，开始。 |
| step-end | 等于1，结束。 |
| steps(int,start | end) |
| cubic-bezier (n,n,n,n) | 通过Cubic贝塞尔函数定义值。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
animation-timing-function 属性定义了动画在每个循环的持续时间内如何进行，而不是贯穿整个动画。
它指定动画的速度曲线，定义动画从一种样式集更改为另一种样式集所需的时间。
可以在@keyframes 规则中的某些关键帧上指定计时函数。
如果关键帧上没有指定的 animation-timing-function ，则元素的 animation-timing-function 的相应值用于该关键帧。
animation-timing-function 属性是 CSS3 属性之一。
它可以采用以下值：
- ease - （默认）缓慢开始，然后变得更快，然后缓慢结束。
- ease-in - 开始缓慢，但在结束时加速并突然停止。
- ease-out - 开始很快，但最后会变慢。
- ease-in-out - 缓慢开始，缓慢结束。
- step-start-等于1，开始。
- step-end-等于1，结束。
- linear - 动画在整个动画中具有相同的速度，通常最适合用于颜色或者不透明度变化。
- steps(int,start|end)- 指定一个带有两个参数的步进函数。第一个参数定义函数中的间隔数。它必须大于 0。第二个参数是值“start”或者“end”，并指定值在区间内发生变化的点。如果未应用第二个参数，则给出值“end”。
- cubic-bezier (n,n,n,n) - 在三次贝塞尔函数中指定我们自己的值。可能的值是从 0 到 1.
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
| 初始值 | ease |
|---|---|
| 应用于 | 所有元素。它还适用于::before和::after伪元素。 |
| 继承 | 不可继承 |
| 可动画的 | 不可动画的 |
| 版本 | CSS3 |
| DOM 语法 | object.Style.AnimationTimingFunction =“linear”; |
语法
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) |initial | inherit;
具有 "ease" 值的 animation-timing-function 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s infinite;
/* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease;
/* Safari 4.0 - 8.0 */
animation: element 5s infinite;
animation-timing-function: ease;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>
具有“ease-in”值的 animation-timing-function 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
-webkit-animation: element 7s infinite;
/* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease-in;
/* Safari 4.0 - 8.0 */
animation: element 7s infinite;
animation-timing-function: ease-in;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>
具有不同计时功能的 animation-timing-function 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
-webkit-animation: mymove 5s infinite;
/* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#div1 {
-webkit-animation-timing-function: linear;
}
#div2 {
-webkit-animation-timing-function: ease;
}
#div3 {
-webkit-animation-timing-function: ease-in;
}
#div4 {
-webkit-animation-timing-function: ease-out;
}
#div5 {
-webkit-animation-timing-function: ease-in-out;
}
#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;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
日期：2020-06-02 22:14:24 来源：oir作者：oir