如何用css animation-timing-function调整动画曲线

animation-timing-function用于控制动画速度变化，提供linear、ease、ease-in-out等预设值，支持cubic-bezier()自定义曲线和steps()实现分步动画，可组合应用于不同属性以增强效果，适用于页面过渡、按钮反馈、滚动动画等场景，兼容性良好。

调整动画曲线，关键就在于

animation-timing-function

animation-timing-function

解决方案

1. 预设值：快速上手，效果立竿见影

   立即学习“前端免费学习笔记（深入）”；

   CSS 提供了几个常用的预设值，它们各有特点：

   • linear

     : 动画匀速进行，没有加速或减速效果。

   • ease

     : 默认值。动画开始时缓慢加速，中间加速，结束前减速。

   • ease-in

     : 动画开始时缓慢加速。

   • ease-out

     : 动画结束时缓慢减速。

   • ease-in-out

     : 动画开始和结束时都缓慢，中间加速。

   使用这些预设值非常简单，只需将它们赋值给

   animation-timing-function

   属性即可：

   .element {
     animation: myAnimation 2s ease-in-out;
   }

   通过调整

   ease-*

   的组合，可以快速实现一些常用的动画效果。

2. cubic-bezier()

   ：精细控制，打造专属曲线

   如果预设值无法满足需求，可以使用

   cubic-bezier()

   函数自定义动画曲线。

   cubic-bezier()

   接受四个参数，分别代表两个控制点的 x 和 y 坐标。这两个控制点决定了动画的速度变化轨迹。

   .element {
     animation: myAnimation 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   }

   理解

   cubic-bezier()

   的参数需要一些时间，但一旦掌握，就能创造出非常复杂和独特的动画效果。有很多在线工具可以帮助可视化

   cubic-bezier()

   曲线，例如 cubic-bezier.com，可以直观地调整参数并预览效果。

3. steps()

   ：分步动画，呈现跳跃效果

   steps()

   函数将动画分割成多个等长的步进，动画会在每个步进的开始或结束时瞬间完成。

   steps()

   接受两个参数：
   

   绘蛙-多图成片

   绘蛙新推出的AI图生视频工具

   下载
   • 第一个参数指定步进的数量。
   • 第二个参数指定动画在步进的开始还是结束时发生变化，可以是

     start

     或

     end

     ，默认为

     end

     。

   .element {
     animation: myAnimation 2s steps(10, end);
   }

   steps()

   适用于创建一些特殊的动画效果，例如逐帧动画或模拟打字效果。

4. 动画组合：叠加效果，增强表现力

   可以将不同的

   animation-timing-function

   应用于不同的动画属性，从而创建更复杂的动画效果。例如，可以对元素的位移使用

   ease-in-out

   ，对透明度使用

   linear

   ，从而使元素的移动更加自然，而透明度的变化保持匀速。

   .element {
     animation: move 2s ease-in-out, fade 2s linear;
   }
   
   @keyframes move {
     from {
       transform: translateX(0);
     }
     to {
       transform: translateX(100px);
     }
   }
   
   @keyframes fade {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }

如何选择合适的

animation-timing-function

选择合适的

animation-timing-function

• 如果想要创建自然流畅的动画，

  ease

  、

  ease-in

  、

  ease-out

  和

  ease-in-out

  是不错的选择。
• 如果需要更精细的控制，

  cubic-bezier()

  可以实现各种自定义曲线。
• 如果需要创建跳跃或分步动画，

  steps()

  是最佳选择。

在实际开发中，可以多尝试不同的

animation-timing-function

animation-timing-function

animation-timing-function

• 页面过渡效果： 在页面切换时，可以使用

  ease-in-out

  或自定义的

  cubic-bezier()

  曲线，使过渡效果更加平滑自然。
• 按钮点击反馈： 当用户点击按钮时，可以使用

  ease-out

  使按钮的缩放或颜色变化更加生动。
• 滚动动画： 结合 JavaScript，可以根据页面滚动的位置，动态调整元素的动画效果，例如视差滚动。
• 加载动画： 可以使用

  linear

  或

  steps()

  创建循环的加载动画，提升用户体验。
• UI 元素动画： 例如，菜单的展开和收起、提示框的显示和隐藏等，都可以使用

  animation-timing-function

  来控制动画的速度和节奏。

animation-timing-function

animation-timing-function

对于一些老旧的浏览器，可能需要添加一些前缀，例如

-webkit-

-moz-

可以使用 Can I use 网站查询

animation-timing-function