[CSS]CSS动画与transform属性

·  阅读 2158
[CSS]CSS动画与transform属性

前言

随著对产品要求的提高,如今几乎所有的页面都会用到动画的效果。目的在于提高用户浏览页面的体验,为了实现页面的动画,前端的技术也在不停的演。从最早的用jq操作dom,到CSS3之后的CSS动画。开发者可用的选择越来越多。我们今天就来讨论一下CSS动画的内容。

为什么要用CSS动画?

要实现页面的动画效果,我们本质上要做的其实是让页面上的元素,可以动起来。因此早期的开发者就想到了用dom的api直接操作元素的样式。配合定时器的使用,我们实现了最早的页面动画。到jq推出动画api之后,更是让动画的开发成本大幅下降。

那么既然jq的动画以及如此成熟了,为什么我们还要谈CSS动画?

这其实涉及到浏览器的显示机制,整体很复杂,大家有兴趣的可以自行查阅相关的资料。这里可以简单说一下, 我们的电脑屏幕是有刷新率的,就是我们常说的xxhz。浏览器本身是可以让页面的内容与电脑屏幕的帧数同步显示的。但是当我们用了定时器+原生dom的动画api之后。如果定时器的频率与屏幕显示的频率不同(而且浏览器的定时器并不是准确的),就会在视觉上出现掉帧等情况。

而如果改用CSS动画的话,浏览器本身是可以帮助我们同步动画显示和屏幕的频率的。因此我们发现css动画总会比js动画更加流畅。

如何实现CSS动画

CSS3之后我们有了专门的动画属性,可以直接通过css实现动画效果。不需要再调用dom api。

transition

【transition】是过渡的意思,可以让一个元素的css属性的展示是逐渐形成的。

/* 使用 */
transition: property duration timing-function delay;
复制代码
/* 示例 */
.box {
        width: 200px;
        height: 200px;
        transition: width 1s;
        background-color: blue;
}
.box:hover {
        width: 100px;
}
复制代码

如上方的css内容,我们定义了一个class为box的元素,并初始时width是200px。当我们hover的时候,width会变成100px。这样的话平常我们鼠标移上去的时候,元素的宽会突然减少一半。但当我们加上transition之后,这个宽度减少的过程就会变成是渐进的了。

更多内容可以查阅:developer.mozilla.org/zh-CN/docs/…

animation

【animation】是动画,通过animation可以高自由地自定义css动画。

/* 使用 */
animation: name duration timing-function delay iteration-count direction;
复制代码
/* 示例 */
@keyframes widen {
        from {
          width: 100px;
        }
        to {
          width: 200px;
        }
}
.box {
        width: 200px;
        height: 200px;
        animation: widen 2s ease;
        animation-fill-mode: forwards;
        background-color: blue;
}
复制代码

观察上方例子,我们可以发现使用animation的时候,我们可以先通过@keyframs 声明一个自定义的动画,再通过animation属性使用。

更多内容可以查阅:developer.mozilla.org/zh-CN/docs/…

transform

【transform】是转化,可以实现旋转,缩放,倾斜或平移等动画效果,甚至3D效果。

/* 使用 */
transform: none|transform-functions;
复制代码
/* 示例 */
.box {
        width: 200px;
        height: 200px;
        transition: transform 1s linear;
        background-color: blue;
}
.box:hover {
        transform: scaleX(0.5);
}
复制代码

通过示例代码,我们其实可以观察到transform的设计概念倾向的是元素的转化,而不是单纯的属性变化。像示例中的把宽度从200px变成100px。我们实际的做法是让元素横向缩小一半。

更多内容可以查阅:developer.mozilla.org/zh-CN/docs/…

为什么说transform是特别?

相信不少的朋友在平常看文章或者做面试题的时候都会遇到,单独把transform拿出来讨论的情况。为什么同样是css动画的实现手动,但transform的待遇好像总是是特别的?

其实这是由浏览器的实现决定的。无论是transition还是animation,都只是浏览器帮助我们实现css属性的动态改变,并根据屏幕帧率实现更自然的动画效果。但本质上css的属性改变还是会触发页面的【重绘】【重排】,因此他们的渲染成本是比较高的。

然而transform的待遇则更高级,由于transform可能涉及3D的动画效果,浏览器会为transform的元素单独生成一个图层,并使用GPU进程单独渲染。因此但触发transform效果的时候,是不会影响主图层的,因此不会触发重绘和重排,效率更高。

同时,由于transform的内容是GPU进程渲染的,所以即使浏览器渲染进程阻塞了,我们会发现transform的动画仍然会正常运行。

顺道提一下will-change

我们会发现will-change往往是配合transform使用的。那么will-change究竟是什么东西?其实它还是一个实验中的功能,因此短时间内渲染大量的复杂页面动画可能会让浏览器表现的“措手不及”,这时候如果要优化这个过程,我们可以通过will-change,这个属性来显式地告诉浏览器,我们会用到什么css属性,让浏览器提前准备。

由于transform的渲染会让浏览器临时生成一个图层,这样的话是涉及进程切换的,有一定的成本。通过will-change可以让浏览器提前准备好,进而提升体验。

/* 使用 */
will-change: property
复制代码
/* 示例 */
.box {
    width: 200px;
    height: 200px;
    transition: transform 1s linear;
    background-color: blue;
		will-change: transfrom;
}
.box:hover {
     transform: scaleX(0.5);
}
复制代码

更多内容可以查阅:developer.mozilla.org/zh-CN/docs/…

总结

今天我们了解了CSS动画的由来,以及对比js动画,它的优势是什么。然后我们讲了如今主流的3个实现CSS动画的属性,并着重讲述了transform的优势和原理。最后提到了will-change的作用。希望可以对大家对css动画的理解有帮助。

参考

www.jianshu.com/p/8a21deb5e…

www.cnblogs.com/www-123456/…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改