CSS | animation-timing-function 属性

CSS | animation-timing-function 属性定义了动画在整个过程中的速度变化。

语法

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|step-start|step-end|steps(int,start|end);

取值

• linear：动画在整个过程中速度保持一致。
• ease：默认属性值，动画在开始和结束时慢，中间过程加速进行。
• ease-in：开始时较慢，后面加速进行。
• ease-out：开始时较快，后面减速进行。
• ease-in-out：开始和结束时较慢，中间过程加速进行。
• cubic-bezier(n,n,n,n)：自定义曲线动画，可以使用贝塞尔曲线自定义动画速度变化。
• step-start：在开始（起点）处使用步进动画。
• step-end：在结束（终点）处使用步进动画。
• steps(int,start|end)：在动画播放期间只显示几个步骤。

使用方法

通过设置 animation-timing-function 属性，将动画速度变化定义为不同的曲线或时间函数。

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

示例

以下是使用不同的 animation-timing-function 值运行的动画示例：

linear

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: linear;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

ease

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

ease-in

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

ease-out

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

ease-in-out

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

cubic-bezier

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.47, 0, 0.33, 0.98);
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

step-start

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: step-start;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

step-end

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: step-end;
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

steps

div{
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: steps(4, start);
}

@keyframes myAnimation {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}