本文介绍了几种实现CSS动画效果的优化方法，包括transition、transform属性的使用，以及通过GPU硬件加速。重点讲解了will-change属性的功能，用于通知浏览器元素将要进行的动画，以便提前进行优化设置。同时，文章强调了使用will-change时的注意事项，如避免过度使用和过早优化，以防止性能问题。
几种实现动画效果的优化方法：
准备知识
GPU是图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，使得CPU从图形处理的任务中解放出来，可以执行其他更多的系统任务
所谓硬件加速，就是在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量
CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。在transition、transform和animation的世界里，应该卸载进程到GPU以加速速度。只有3D变形会有自己的layer，而2D变形则不会
一、transition：height ；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.d1 {
background: palegreen;
width: 100px;
height: 100px;
transition:height 1s ;
}
.d1:hover {
height: 200px;
}
</style>
<body>
最低0.47元/天 解锁文章
扫一扫
3709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
