如何实现平滑的“box-shadow”动画效果_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:54:29
Original
1394 people have browsed it

你如何在 CSS 中设置 box-shadow 属性实现动画效果,既不会导致重新绘制每一帧,又不会严重影响你页面的性能?回答是:你并不能实现。因为 box-shadow 的动画变化会损害性能。

这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制,应该创建一个伪元素并对其 opacity 元素进行动画处理,使其以每秒60帧的动画模仿运动物体相同的效果。

实例

认真观察 这个实例 ,比较我们在其中使用的不同技巧。你是不是会说两者效果看起来一样。唯一不同的是我们如何应用阴影并对其进行动画处理。在左边实例中,我们鼠标 hover (悬浮)时,对 box-shadow 应用了动画效果。而在右边的实例中,我们用 ::after 添加了一个伪元素并对其设置了阴影,并对该元素的 opacity 元素进行了动画处理。

如果你使用开发工具尝试了其中之一,您应该会看到类似这样的东西 (绿色条表示已经绘制,其越少越好):

当你悬停在左边的卡片(在 box-shadow 上应用动画)与悬浮在右边的卡片(对其伪元素的 opacity 应用动画)进行相比时,你会很明显的发现有更多的重新绘制。

为什么我们会看到这种效果?有 很少的 CSS 属性 ,即 opacity 和 transform ,进行动画处理时,不会不断触发重绘每一帧。我们最好坚持只在动画中更改这两个属性实现最小化重绘 (您的浏览器不得不做的工作)。

抛却其它的布局样式,这就是这两种技术之间的关键区别

/* The slow way */.make-it-slow { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease-in-out:}/* 鼠标悬停实现更大阴影的过渡 */.make-it-slow:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.3);}/* The fast way */.make-it-fast { box-shadow: 0 1px 2px rgba(0,0,0,0.15);}/* 设置更大的阴影并将之隐藏 */.make-it-fast::after { box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease-in-out:}/* 鼠标悬停时实现更大阴影的过渡显示 */.make-it-fast:hover::after { opacity: 1;}
Copy after login

详细分解

基于上面所述,让我们看看如何创建上面示例中演示的 3D卡片效果 。第一步是将阴影转移到到一个伪元素,就像我们上面所做的一样。让我们也给所有创建的卡片添加布局代码:

/* 创建一个简单白色盒子,并添加阴影 */.box { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out;}/* 创建隐藏的伪元素 *//* 最终样式包含阴影 */.box::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: opacity 0.3s ease-in-out;}
Copy after login

注意,我们要 .box 和 .box::after 添加了 transition 元素,因为我们要对这两个元素进行动画处理: .box 上应用 transform 元素, .box::after 上应用 opacity 元素.

这些样式给我们展示了一个具有微妙 box-shadow 样式的白色盒子。这里 .box::after 上的阴影已经完全被隐藏,不能与盒子效果相互影响。

若要创建 演示 中相同的效果,现在我们需要做的是:当鼠标悬停在 .box 时,产生放大效果,并且在伪元素和阴影上实现淡化:

/* 放大盒子 */.box:hover { transform: scale(1.2, 1.2);}/* 伪元素更大阴影的淡化 */.box:hover::after { opacity: 1;}
Copy after login

总之,这就是所有的CSS样式,包括不同浏览器的兼容样式和一些额外的自定义缓动效果:

.box { position: relative; display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box::after { content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box:hover { -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25);}.box:hover::after { opacity: 1;}
Copy after login

显然这里与只使用 box-shadow 相比应用了大量的 CSS 来实现相同的动画效果,只是改进性能。这又何必呢?

即使你的桌面处理 box-shadow 动画时没有任何问题,你的手机可能也不会出现问题。但是当你处理更为复杂的布局时,你就会发现你的桌面可能开始表现出症状。

保持只在过渡(transitions)和动画(animations)上应用 transform 和 opacity 元素,你就会达到最佳的性能,那才是最佳的用户体验。

本文根据 @Tobias 的《 How to animate "box-shadow" with silky smooth performance 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 。

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!