CSS3特效之转化（transform）和过渡（transition）

超、凢脫俗 2022-07-30 13:13 219阅读 0赞

在对动画深入之前，我们需要先了解它的一些特性，CSS3的转化（transform）和过渡（transition）。有人可能会有疑问，CSS3动画不是只有animation一个属性吗？怎么又和转化（transform）和过渡（transition）扯上关系了，其实并非如此，转化（transform）属性让动画的变换多元化，而过渡（transition）属性是动画中的一种表现形式，也可以说成是动画一个版本。多元化相信大家都能理解，这边就不提了，为什么说过渡（transition）属性是动画的一个版本？这个在了解了转化（transform）和过渡（transition）基本知识后，我再陈述其中的原因。

言归正传，现在我们就开始认识下CSS3中的转化（transform）和过渡（transition）两个属性。

> **开发商前缀的特定浏览器样式**

理解CSS3属性之前，我们需要先理解什么是开发商前缀，为什么会有开发商前缀？开发商前缀顾名思义和各大浏览器的开发商相关，是各大浏览器用来标识自身的一种特殊标记。那么为什么会出现开发前缀这种标记呢？其实这和CSS3标准制定流程有关系，制定CSS标准的那群人在引入新功能时，需要听取浏览器开发商和Web设计人员的反馈，之后更需要让浏览器开发商和Web设计人员实现不完美的功能，这样就会形成一个试验和反馈循环。在此期间，Web设计人员使用新功能在网站中，如果将来标准发生改变，就会导致网站无法使用，所有浏览器开发商就使用了开发商前缀的方法来避免这一问题的发生。

开发商前缀：

![这里写图片描述][20160417154022988]

> **转化（transform）**

定义和用法：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

transform 2D转换方法：

![这里写图片描述][20160417161306799]

浏览器支持：

![这里写图片描述][20160417161525393]

*  Internet Explorer 10、Firefox、Opera 支持 transform 属性。
 *  Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
 *  Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
 *  Opera 只支持 2D 转换。

> **过渡（transition）**

定义和用法：transition 属性是一个简写属性，用于设置四个过渡属性：transition-property、transition-duration、transition-timing-function、transition-delay

语法：transition: property duration timing-function delay;

属性值：

![这里写图片描述][20160417165242892]

> **测试Demo**

HTML代码：

CSS代码：

.box{ width: 360px; height: 100px; background-color: palegreen; text-align: center; position: relative; }
            .box .circle{ position: absolute; width: 30px; height: 30px; border-radius: 30px; background-color: pink; left: 0; top: 35px; -moz-transition:ease-out 1s; -o-transition:ease-out 1s; -webkit-transition:ease-out 1s; transition:ease-out 1s; }
            .box:hover .circle{ left: 270px; background-color: red; -moz-transform:scale(1.5); -o-transform:scale(1.5); -webkit-transform:scale(1.5); transform: scale(1.5); }

> **过渡（transition）属性是动画的一个版本**

由于还没有开始介绍动画的特性，所以先用简单的代码来进行测试，分析下为什么说过渡（transition）属性是动画的一个版本。还是以上面的HTML代码结构，为了让大家简单易懂CSS代码中过渡效果只保留left值属性。

CSS代码：

动画替代过渡（transition）属性

CSS代码（只做测试，不考虑各大浏览器的前缀）

.mouse-over{ animation:moveR ease-out 1s forwards; }
            .mouse-out{ animation:moveL ease-out 1s forwards; }
            @keyframes moveR {
               from{ left: 0;}
               to{ left: 270px;}
            }
            @keyframes moveL {
                from{ left: 270px;}
                to{ left: 0;}
            }

过渡（transition）可以分解为两个动画效果在不停的相互交换，鼠标移入时的效果等同于添加动画.mouse-over，移出是等同添加动画.mouse-out。当然在过渡（transition）中DOM节点所到达的目标位置和运行的时间相关，所有如果需要精确分解整个动画过程，相对还是比较复杂的。

> **总结**

转化（transform）是为了丰富DOM节点的变换方式，过渡（transition）是操作DOM节点样式的运动。在当下，大量的浏览器会涉及到动画，都会采用CSS3新特性来实现，相对于JQuery封装的动画效果它的运动更加流畅，减小JQuery带来的计算负荷。对于移动端，CSS3新特性使用更加普遍，为了能更好的渲染网站，很多优秀的前端工程师都会选择对应的属性来调取手机GPU，让这些效果被渲染的更流畅。

[20160417154022988]: /images/20220724/76c3d117abf446eb87c7247ebeb1e6c7.png
[20160417161306799]: /images/20220724/c98f22dc6c81428aafdeb8f82e08d555.png
[20160417161525393]: /images/20220724/b574086eefc040db96d9d87ea9a76248.png
[20160417165242892]: /images/20220724/8be4bccea16544ac8994616d87b60296.png