移动端动画缓动函数怎么自定义才流畅？

UX丽苹提问于 2026-03-21 10:31:18 阅读 25

移动

我在用 CSS 做一个下拉菜单的展开动画，用了 transition: height 0.3s ease-out，但感觉不够自然。查资料说可以自定义 cubic-bezier，但我试了几个值效果都不对，要么太生硬要么卡顿。

有没有推荐的缓动函数写法？或者是不是我应该改用 JavaScript 配合 requestAnimationFrame 来控制？比如下面这样写是不是更合适？

.menu {
  transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

我来解答赞 2 收藏

反馈

2 条解答

设计师景景 Lv1

直接用 cubic-bezier，试试这个值，感觉还行：

.menu {

  transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

这个是 ease-in-out 的效果，看起来挺自然的。如果还是不满意，可以试试其他预设的贝塞尔曲线，或者用工具调整直到满意为止。

2026-03-23 10:09

Des.光远 Lv1

做移动端动画的时候，确实 cubic-bezier 是个不错的选择，能够让你的动画更加自然。你提到的 cubic-bezier(0.25, 0.46, 0.45, 0.94) 是个比较常用的缓动函数，接近于 ease-in-out 效果，如果觉得不够自然，可以稍微调整一下参数。

CSS 的 cubic-bezier 工具网站比如 cubic-bezier.com 很好用，可以在上面拖动曲线找到适合的效果。一般来说，移动设备上流畅的动画过渡时间在 200ms 到 500ms 之间，你可以试试 transition: height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 这种弹跳效果，或者 cubic-bezier(0.77, 0, 0.175, 1) 这种接近于 easeInOutQuad 的效果。

如果觉得 CSS 满足不了需求，可以尝试用 JavaScript 和 requestAnimationFrame，这样可以完全自定义动画过程。不过要注意性能问题，尤其是在低端设备上，频繁操作 DOM 可能会导致卡顿。下面是一个简单的例子：

function animateHeight(element, startHeight, endHeight, duration) {

  let startTime = null;

  function step(timestamp) {

    if (!startTime) startTime = timestamp;

    let progress = timestamp - startTime;

    let currentHeight = Math.min(startHeight + (endHeight - startHeight) * (progress / duration), endHeight);

    element.style.height = currentHeight + 'px';

    if (progress < duration) {

      requestAnimationFrame(step);

    }

  }

  requestAnimationFrame(step);

}



// 使用方法

let menu = document.querySelector('.menu');

animateHeight(menu, 0, 200, 300); // 从 0 到 200px，持续 300ms





这段代码简单实现了从某个高度到另一个高度的动画，你可以根据需要调整起始高度、结束高度和持续时间。记得在实际项目中要做适当的错误处理和边界条件检查。


                
                    
                    
                        点赞
                        
                    
                    
                    
                    2026-03-21 11:03


                    
                        
                            相关推荐
                            
                                
    
        
            1
            回答
        
        
            30
            浏览
        
    
    
        缓动函数怎么让动画更自然？
        我用JS写了个简单的元素移动动画，但感觉生硬卡顿，不像CSS transition那样顺滑。是不是缓动函数没选对？ 试过直接改 time / duration 的比例，但效果还是线性的。网上说要用 e...
        
            令狐春红
                            交互                        2026-03-11 17:11:22
        
    

    
        
            2
            回答
        
        
            64
            浏览
        
    
    
        移动端动画缓动函数在iOS和Android表现不一致怎么办？
        用CSS cubic-bezier写了个弹跳动画，iOS上很流畅但Android卡成PPT，搞不懂为啥差距这么大。试过把ease-in-out改成cubic-bezier(0.25, 0.1, 0.2...
        
            姿言
                            移动                        2026-01-30 23:16:27
        
    

    
        
            2
            回答
        
        
            22
            浏览
        
    
    
        移动端用CSS动画卡顿怎么办？
        我在手机上用CSS做了一个简单的滑入动画，但明显感觉卡顿不流畅，试过加transform: translateZ(0)也没啥用，是不是哪里写错了？ 这是我的关键代码： .slide-in { anim...
        
            雯婷
                            移动                        2026-03-31 12:43:11
        
    

    
        
            1
            回答
        
        
            23
            浏览
        
    
    
        Lottie动画在移动端卡顿怎么办？
        我在项目里用 Lottie 加载了一个 JSON 动画，桌面端跑得很流畅，但一到手机上就明显卡顿，尤其在低端安卓机上几乎动不了。我试过把动画帧率从 60 降到 30，也压缩了 JSON 文件大小，但效...
        
            W″子慧
                            交互                        2026-03-17 16:22:22
        
    

    
        
            2
            回答
        
        
            46
            浏览
        
    
    
        iView表格的render函数里怎么拿到当前行数据？
        我在用 iView 的 Table 组件时，想在某一列用 render 函数自定义内容，但不知道怎么在 render 里获取当前行的数据。文档看了半天也没搞明白，试了 this.row、params....
        
            W″云超
                            组件                        2026-03-12 20:46:21
        
    

    
        
            1
            回答
        
        
            37
            浏览
        
    
    
        移动端CSS动画卡顿怎么办？
        我在做一个移动端的下拉刷新动画，用的是CSS的transform和transition，但在安卓机上特别卡，iOS还好一点。我试过加了will-change: transform，也用了transla...
        
            设计师利娟
                            移动                        2026-03-12 13:43:20
        
    

    
        
            1
            回答
        
        
            48
            浏览
        
    
    
        移动端CSS动画卡顿怎么优化？
        我在做一个移动端的下拉刷新动画，用的是CSS的transform: translateY()配合transition，但在低端安卓机上特别卡，掉帧严重。我查了资料说要加will-change或者用tr...
        
            打工人艳花
                            移动                        2026-03-03 22:15:20
        
    

    
        
            2
            回答
        
        
            46
            浏览
        
    
    
        SVG在移动端动画卡顿怎么办？
        我在用 Vue 做一个移动端的加载动画，用了 SVG 的 animateTransform，但在 iOS Safari 上特别卡，安卓也掉帧。本地开发时 Chrome 看着挺流畅的，一到真机就崩，是不...
        
            爱棋酱~
                            移动                        2026-02-27 22:57:21
        
    

    
        
            2
            回答
        
        
            43
            浏览
        
    
    
        Angular自定义指令里怎么监听宿主元素的点击事件？
        我在写一个自定义指令，想在宿主元素被点击时执行一些逻辑，但不知道该怎么绑定点击事件。试过在构造函数里用 elementRef.nativeElement.addEventListener，但听说这样不...
        
            ❤江洁
                            框架                        2026-02-26 08:46:23
        
    

    
        
            2
            回答
        
        
            33
            浏览
        
    
    
        移动端点击按钮后动画卡顿怎么办？
        我在做一个移动端的点赞按钮，点击后想让它有个缩放动画，但在真机上测试时发现动画特别卡，尤其在低端安卓机上几乎掉帧。我试过用 transform 替代 width/height 变化，也加了 will-...
        
            殿薇酱~
                            移动                        2026-02-25 13:26:19


                
    Copyright © 2026 JZTHEME All rights reserved网站地图桂ICP备2022001918号-9