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

FPS 全称：

常规操作

使用【will-change: transform;】

FPS 全称：

Frames per second，即 【每秒帧数】 的意思。通常来讲，当动画的每秒帧数低于 12 （即 12 FPS 以下）时，我们的大脑就能快速从动画中区分出一些静止的图片，所以此时的动画并不是无缝动画。

一旦播放速率（每秒帧数）达到 16-24 FPS 时，大脑就会认为这些画面是连续移动的场景，看起来就是影片的效果了（大部分数字电影拍摄是每秒 24 帧）。所以，我们可以大致了解到：FPS 越高，画面越流畅！

常规操作

“CSS3 动画，有手就行！”

但是效果是否卡顿呢？

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

<!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有变化，效果会更好。

希望能对大家有所帮助。

CSS3 实现 60 FPS (60帧)动画效果相关推荐

html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
android 自定义帧动画,Android 自定义方式实现帧动画效果
前言首先说下为啥要通过自定义处理的方式去实现Android的帧动画效果,因为通过系统原生支持的xml和java代码这两种方式实现,在播放的图片量很多时,会出现内存溢出,此现象也是在做项目当中有遇到, ...
css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画
© Young 2018-12-26 21:43 Welcome to My GitHub 一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图 ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
css动画帧动画效果,CSS3动画之逐帧动画
什么是逐帧动画要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画. 看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简而言之 ...
html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

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

FPS 全称：

常规操作

使用【will-change: transform;】

CSS3 实现 60 FPS (60帧)动画效果相关推荐

最新文章

热门文章