CSS3 实现 60 FPS (60帧)动画效果

FPS 全称：

常规操作

使用【will-change: transform;】

FPS 全称：

Frames per second，即 【每秒帧数】 的意思。通常来讲，当动画的每秒帧数低于 12 （即 12 FPS 以下）时，我们的大脑就能快速从动画中区分出一些静止的图片，所以此时的动画并不是无缝动画。一旦播放速率（每秒帧数）达到 16-24 FPS 时，大脑就会认为这些画面是连续移动的场景，看起来就是影片的效果了（大部分数字电影拍摄是每秒 24 帧）。所以，我们可以大致了解到：FPS 越高，画面越流畅！

常规操作

“CSS3 动画，有手就行！”

但是效果是否卡顿呢？

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS60_FPS测试</title>
</head>

<body>
    <div class="layout">
        <div class="app-menu">菜单</div>
        <div class="header">
            <div class="menu-icon">某CMS内容管理系统</div>
            <hr/>
            <div class="menu-context">内容</div>
        </div>
    </div>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 2rem;
        }
        
        .app-menu {
            background-color: skyblue;
            width: 5px;
            overflow: hidden;
            height: 100vh;
            transition: all 200ms;
        }
        
        .app-menu:hover {
            width: 10%;
            transition: all 200ms;
        }
        
        .app-menu,
        .header {
            float: left;
        }
        
        .header {
            height: 100vh;
        }
    </style>
</body>

</html>

从性能里看，还是不太流畅。

其实不够平滑，那么就稍微装饰一下。

使用【will-change: transform;】

CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS60_FPS测试</title>
</head>

<body>
    <div class="layout">
        <div class="app-menu">菜单</div>
        <div class="header">
            <div class="menu-icon">某CMS内容管理系统</div>
            <hr/>
            <div class="menu-context">内容</div>
        </div>
    </div>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 2rem;
        }
        
        .app-menu {
            background-color: skyblue;
            width: 5px;
            overflow: hidden;
            height: 100vh;
            transition: all 300ms linear;
            will-change: transform;
        }
        
        .app-menu:hover {
            width: 10%;
            transition: all 200ms linear;
            will-change: transform;
        }
        
        .app-menu,
        .header {
            float: left;
        }
        
        .header {
            height: 100vh;
        }
    </style>
</body>

</html>

提前告诉CSS有变化，效果会更好。

希望能对大家有所帮助。

css

0 人点赞