你所不知道的 CSS 动画技巧与细节

简介:

怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画。

废话少说,直接进入正题,本文提到的动画不加特殊说明,皆指 CSS 动画。

 

正负旋转相消

嗯。名字起的很奇怪,好像数学概念一样。image

(写完文章才发现这里应该叫正反旋转相消,图都截完了,大家心里清楚就好)

在动画中,旋转是非常常用的属性,

1
2
3
{
   transform: rotate( 90 deg);
}

那旋转有一些什么高级点的技巧呢?当然是可以改变 transfrom-origin ,改变旋转中心点啦。

image

开个玩笑,改变旋转中心点这个估计大家都知道了,这里要介绍的技巧是利用父级元素正反两个方向的旋转,来制作一些酷炫的 3d 效果。

首先假设一下场景,我们有这样的一层 HTML 结构:

1
2
3
4
5
< div  class="reverseRotate">
     < div  class="rotate">
         < div  class="content">正负旋转相消3D动画</ div >
     </ div >
</ div >

样式如下:

image

.content 内是我们的主要内容,好了,现在想象一下,如果祖先元素 .rotate 进行正向 linear 360° 旋转,父级元素 .reverseRotate 进行反向 linear 360° 旋转,效果回是啥样?

CSS 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.rotate {
     animation: rotate  5 s linear infinite;
}
 
.reverseRotate {
     animation: reverseRotate  5 s linear infinite;
}
 
@keyframes rotate {
     100%  {
         transform: rotate( 360 deg);
     }
}
 
@keyframes reverseRotate {
     100%  {
         transform: rotate( -360 deg);
     }
}

神奇!因为一正一反的旋转,且缓动函数一样,所以整个 content 看上去依然是静止的!注意,这里整个 content 静止的非常重要。

有读者看到这里就要骂街了,作者你个智障,静止了不就没动画了吗?哪来的动画技巧?

image

别急!虽然看上去是静止的,但是其实祖先两个元素都是在旋转的!这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的:

rotate

既然如此,我们继续思考,如果我在其中旋转的一个祖先元素上,添加一些别的动画会是什么效果?想想就很刺激啊。image

为了和文案里面的 3D 动画扯上关系,我们先给这几个元素添加 3D 转换:

1
2
3
4
div {
     transform-style: preserve-3d;
     perspective: 500px;
}

接着,尝试修改上面的旋转动画,在内层旋转上额外添加一个 rotateX:

1
2
3
4
5
6
7
8
9
10
11
@keyframes rotate {
     0%  {
         transform: rotateX( 0 deg) rotateZ( 0 deg);
     }
     50%  {
         transform: rotateX( 40 deg) rotateZ( 180 deg);
     }
     100%  {
         transform: rotateX( 0 deg) rotateZ( 360 deg);
     }
}

效果如下:

reverserotate

Wow,这里需要好好理解一下。由于内容 content 层是静止的但其实外层两个图层都在旋转,通过设置额外的 rotateX(40deg) ,相当于叠加多了一个动画,由于正反旋转抵消了,所有整个动画只能看到旋转的 rotateX(40deg) 这个动画,产生了上述的效果。

CodePen Demo -- Css正负旋转相消动画

 

动画相同,缓动不同

好的,继续下一个小技巧。

有的时候我们页面存在一些具有相同动画的元素,为了让动画不那么死板,我们可以给相同的动画,赋予不同的缓动函数,来达到动画效果。

假设我们有如下的结构:

1
2
3
4
5
< div  class="container">
     < div  class="ball ball1"></ div >
     < div  class="ball ball2"></ div >
     < div  class="ball ball3"></ div >
</ div >

样式如下:

image

我们给它们相同的动画,但是赋予不一样的缓动函数(animation-timing-function),就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.ball 1  {
     animation:  move  1 s ease-in infinite alternate;
}
 
.ball 2  {
     animation:  move  1 s linear infinite alternate;
}
 
.ball 3  {
     animation:  move  1 s ease-out infinite alternate;
}
 
@keyframes  move  {
     100%  {
         transform: translateY( 5 vw);
     }
}

这样,一个简单的 loading 效果就制作好了。(当然这个技巧比较简单,学会合理运用是关键)

animationtimingf

CodePen Demo -- 动画相同,缓动不同

奇妙的缓动

缓动函数 timing-function 在动画中占据了非常重要的地位。

当你不想使用 CSS 默认提供的 linearease-inease-out 之类缓动函数的,可以自定义 cubic-bezier(1, 1, 0, 0),这里有个非常好用的工具推荐,下面这个网站,可以方便的调出你需要的缓动函数并且拿到对应的 cubic-bezier 。

cubic-bezier.com

 

过渡取消

我们在制作页面的时候,为了让页面更加有交互感,会给按钮,阴影,颜色等样式添加过渡效果,配合 hover 一起使用。

这个是常规思维,如果我们的元素一开始是没有过渡效果,只有 hover 上去才给它添加一个过渡,又或者一开始元素是有过渡效果的,当我们 hover 上去时,取消它的过渡,会碰撞出什么样的火花呢?

使用这个技巧(也许算不上技巧,纯粹好玩),我们可以制作出一些有趣的效果,例如下面这个感觉是利用就 JS 才完成的动画,其实是纯 CSS 动画:

transitionstop

其实就小圆圈是元素默认是带有 transition 的,只有在 hover 上去的时候,取消它的过渡,简单的过程:

  1. 由于一开始它的颜色的透明的,而 hover 的时候会赋予它颜色值,但是由于 hover 时过渡被取消了,所有它会直接显示。

  2. hover 离开的时候,它的原本的过渡又回来了,这个时候它会从有颜色到透明值缓慢渐变消失。

可以戳这里感受一下:

CodePen Demo -- Cancle transition

 

动画层级的控制,保持动画层级在最上方

这个问题可能有一点难理解。需要了解 CSS 动画渲染优化的相关知识。

先说结论,动画层级的控制的意思是尽量让需要进行 CSS 动画的元素的 z-index 保持在页面最上方,避免浏览器创建不必要的图形层(GraphicsLayer),能够很好的提升渲染性能。

OK,再一次提到了图形层(GraphicsLayer),这是一个浏览器渲染原理相关的知识(WebKit/blink内核下)。

image

简单来说,浏览器为了提升动画的性能,为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层,合成层拥有单独的 GraphicsLayer。

需要进行动画的元素包含在这个合成层之下,这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可,从而达到提升动画性能的目的。

那么一个元素什么时候会触发创建一个 Graphics Layer 层?从目前来说,满足以下任意情况便会创建层:

  • 硬件加速的 iframe 元素(比如 iframe 嵌入的页面中有合成层)
  • 硬件加速的插件,比如 flash 等等
  • 使用加速视频解码的 元素
  • 3D 或者 硬件加速的 2D Canvas 元素
  • 3D 或透视变换(perspective、transform) 的 CSS 属性
  • 对自己的 opacity 做 CSS 动画或使用一个动画变换的元素
  • 拥有加速 CSS 过滤器的元素
  • 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素

本题中说到的动画层级的控制,原因就在于上面生成层的最后一条:

元素有一个 z-index 较低且包含一个复合层的兄弟元素。

这里是存在坑的地方,首先我们要明确两点:

  1. 我们希望我们的动画得到 GPU 硬件加速,所以我们会利用类似 transform: translate3d() 这样的方式生成一个 Graphics Layer 层。
  2. Graphics Layer 虽好,但不是越多越好,每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ,并计算他们下一帧的重绘区域,所以过量的 Graphics Layer 计算也会给渲染造成性能影响。

记住这两点之后,回到上面我们说的坑。

假设我们有一个轮播图,有一个 ul 列表,结构如下:

1
2
3
4
5
6
7
8
9
< div  class="container">
     < div  class="swiper">轮播图</ div >
     < ul  class="list">
         < li >列表li</ li >
         < li >列表li</ li >
         < li >列表li</ li >
         < li >列表li</ li >
     </ ul >
</ div >

假设给他们定义如下 CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.swiper {
     position static ;
     animation:  10 move  infinite;
}
     
.list {
     position relative ;
}
 
@keyframes  move  {
     100%  {
         transform: translate 3 d( 10px 0 0 );
     }
}

由于给 .swiper 添加了 translate3d(10px, 0, 0) 动画,所以它会生成一个 Graphics Layer,如下图所示,用开发者工具可以打开层的展示,图形外的黄色边框即代表生成了一个独立的复合层,拥有独立的 Graphics Layer 。

image

但是!在上面的图中,我们并没有给下面的 list 也添加任何能触发生成 Graphics Layer 的属性,但是它也同样也有黄色的边框,生成了一个独立的复合层。

原因在于上面那条元素有一个 z-index 较低且包含一个复合层的兄弟元素。我们并不希望 list 元素也生成 Graphics Layer ,但是由于 CSS 层级定义原因,下面的 list 的层级高于上面的 swiper,所以它被动的也生成了一个 Graphics Layer 。

使用 Chrome,我们也可以观察到这种层级关系,可以看到 .list 的层级高于 .swiper

image

所以,下面我们修改一下 CSS ,改成:

1
2
3
4
5
6
7
8
.swiper {
     position relative ;
     z-index 100 ;
}
     
.list {
     position relative ;
}

这里,我们明确使得 .swiper 的层级高于 .list ,再打开开发者工具观察一下:

image

可以看到,这一次,.list 元素已经没有了黄色外边框,说明此时没有生成 Graphics Layer 。再看看层级图:

image

此时,层级关系才是我们希望看到的,.list 元素没有触发生成 Graphics Layer 。而我们希望需要硬件加速的 .swiper 保持在最上方,每次动画过程中只会独立重绘这部分的区域。

总结

这个坑最早见于张云龙发布的这篇文章CSS3硬件加速也有坑,这里还要总结补充的是:

  • GPU 硬件加速也会有坑,当我们希望使用利用类似 transform: translate3d() 这样的方式开启 GPU 硬件加速,一定要注意元素层级的关系,尽量保持让需要进行 CSS 动画的元素的 z-index 保持在页面最上方。

  • Graphics Layer 不是越多越好,每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ,并计算他们下一帧的重绘区域,所以过量的 Graphics Layer 计算也会给渲染造成性能影响。

  • 可以使用 Chrome ,用上面介绍的两个工具对自己的页面生成的 Graphics Layer 和元素层级进行观察然后进行相应修改。

  • 上面观察页面层级的 chrome 工具非常吃内存?好像还是一个处于实验室的功能,分析稍微大一点的页面容易直接卡死,所以要多学会使用第一种观察黄色边框的方式查看页面生成的 Graphics Layer 这种方式。

 

数字动画

很多技巧单独拿出来可能都显得比较单薄,我觉得最重要的是平时多积累,学会融会贯通,在实际项目中灵活组合运用,最近项目需要一个比较富有科技感的数字计数器,展示在线人数的不断增加。因为是内部需求,没有设计稿,靠前端自由发挥。

运用了上面提到的一些小技巧,参考了一些 CodePen 上的效果,整了个下述的 3D 数字计数效果,纯 CSS 实现,效果图如下:

numbercount

CodePen Demo -- 3d Number Count

这个例子主要是想告诉大家,很多小的细节小的技巧合在一起,是可以作出非常酷炫的动画的。

 

最后

还有一些技巧,感觉本文的信息量已经够大了,所以可能会出个下篇。

系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果觉得文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
打赏支持


本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/7443263.html
目录
相关文章
|
1月前
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
32 1
|
4天前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
|
4天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。
|
9天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
16天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
22 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
20天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
25 1
|
1月前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
30 0
|
1月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
24 2
|
1月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
1月前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形