1-2-11【CSS3】CSS过渡属性

题外话：这节课非常有意思哦~可以让元素动起来啦

---

文章内容输出来源：拉勾教育大前端就业集训营

1.概述

• CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画。
• flash采用帧动画的形式制作动画，通过一帧一帧的画面按照固定的顺序和速度播放，比如说老式胶片电影。

老式胶卷电影的经典开头。

2.过渡属性

• 概述：在不使用Flash和js的情况下，使用过度属性可自动实现动画效果。
  当前元素只要有“属性”发生变化时，即存在A和B两种状态，使用过渡属性，即可实现A和B之间的平滑过渡动画效果。

• 属性写法：transition：过渡的属性 过渡时间 运动曲线 延时时间;

说明：transition设置的意思是：“当该元素的width属性发生变化时，使变化过渡0.2s实现，使用线性的变化方式，延迟0s开始过渡。
因为transition属性没有监视height属性，所以就算height变化了，也是直接变化而没有过渡动画。

单一属性

transition-property过渡的属性

• 属性值：
  • none：表示没有属性过渡；
  • all：表示所有变化的属性都过渡；
  • 属性名：使用具体属性名，多个属性名用逗号隔开。

transition-duration和transition-delay

• 概述：duration是过渡的时间长度，delay是在过渡前的延迟时间。
• 属性值：以s为单位的时间长度，就算是0也要加单位s。

transition-timing-function时间曲线

• 概述：动画在播放时遵循的时间曲线。
• 属性值：

属性值	描述
linear	规定以恒定的速度实现从开始到结束的效果
ease	规定慢速开始，然后变快，然后慢速结束的效果
ease-in	规定以慢速开始，逐渐加速的效果
ease-out	规定以快速开始，逐渐减速的效果
ease-in-out	规定以慢速开始和结束的效果
cubic-bezier(x1,y1,x2,y2)	用两个点的坐标值，计算出一条贝塞尔曲线，作为动画的时间曲线

说明：如图所示，贝塞尔曲线是由两个点计算得到的一条时间曲线，所以在cubic-bezier()中，只需要提供两个点，就可以指定一条你自定义的时间曲线。

兼容性：IE10、Firefox、Chrome以及Opera浏览器支持transition属性。Safari需要加前缀-webkit-。

3.2D转换

• 概述：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，几乎可以完全取代Flash。
• 属性名：transform
• 属性值：根据不同的属性值，实现不同的2D转换。

注意！ transform是一个独立的属性，并不需要搭配transition才能生效。我只是为了例子更加直观所以才一起写的，不要被误导哦~

位移 translate()

• 概述：对元素进行水平&垂直方向上的移动。
• 书写语法：

属性值	说明
translate(x,y)	x,y分别是水平和垂直方向的距离，可以为px也可以为%
translate(x)	只有一个数值，表示水平方向的位移

说明：利用伪类选择器hover，实现鼠标移动至盒子上方时，盒子向右向下各位移100像素。

缩放 scale()

• 概述：在元素的宽高两个维度对元素进行缩放。
• 书写语法：

属性值	说明
scale(x,y)	x,y分别是改变宽度和高度的倍数
scale(n)	只有一个数值，表示宽高同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

说明：如图所示，缩放盒子的宽度为50%，缩放盒子的高度为150%。

旋转 rotate()

• 概述：在元素的宽高两个维度对元素进行缩放。
• 书写语法：transform: rotate(数字deg)
  • 说明：deg为度数单位，正数为顺时针旋转，负数为逆时针旋转。
  • 注意：元素旋转后坐标轴也会发生变化！

说明：因为旋转后，元素的坐标轴也会跟着旋转，所以旋转后的位移会以新的坐标轴为基准进行旋转，就导致了粉色盒子的情况。而同比红色的盒子，是先位移后旋转，位移时坐标轴没有受到影响，所以符合我们的预期。

倾斜 skew()

• 概述：在元素的水平方向和垂直方向上进行2D倾斜。
• 书写语法：transform: skew(数字deg,数字deg);
• 注意：两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。

说明：此处以“在水平方向的倾斜”为例，注意，虽然倾斜了，但是坐标轴并没有发生变化。

transform-origin属性

• 概述：调整元素的水平和垂直方向基准点的位置。
• 作用：主要用于旋转，旋转是以元素的基准点进行变换的，基准点的位置不同，旋转的效果也不同。
• 书写方式：transform-origin: 水平方向 垂直方向;
• 属性值：
  • 水平方向：可以使用关键字left、center、right以及像素值和百分比。
  • 垂直方向：可以使用关键字top、center、bottom以及像素值和百分比。

说明：粉色盒子的基准点是盒子的正中心，所以旋转起来是以中心为基准顺时针旋转45°；而红色盒子的基准点是左上顶点，所以旋转起来是以左上顶点为中心顺时针旋转45°，两者效果因基准点位置不同而大相径庭。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉