12.CSS笔记：变换、过渡、动画属性
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
CSS3的变换，过渡和动画为页面的展现带来了翻天覆地的变化，使用它们可以创造出意想不到的动画和变换效果
CSS3的变换或者动画不会影响周围的元素布局（不会导致页面重绘）
------3D变换还没有完全吃透，待强化------
一. 变换（transform）
1. transform属性（CSS3新增）
- 作用：指定元素的变换
- 默认值：none
- 适用于：所有块级元素及某些内联元素
- 继承性：无
- 动画性：有
- 取值：none、translate、rotate........
平移变换
- translateX()——（2D）指定元素X轴（水平）方向的平移
- translateY()——（2D）指定元素Y轴（垂直）方向的平移
- translate()——（2D）同时指定元素X轴和Y轴的平移
- translateZ()——（3D）指定元素Z轴方向的平移
- translate3d()——（3D）同时指定元素X、Y、Z轴的平移
前两个方法接收一个长度参数，后一个方法接收两个参数（第一个参数对应X轴，第二个对应Y轴（省略则默认为0））
对于3D方法来说，前一个接收一个长度参数，后一个接收三个参数（分别对应X轴，Y轴，Z轴，且不能省略）
transform:translateX(100px);
transform:translate(100px,200px); 旋转变换
- rotate()——（2D）指定元素2D旋转（平面翻转）
- rotateX()——（3D）指定元素沿X轴旋转（前后翻转）
- rotateY()——（3D）指定元素沿Y轴旋转（左右翻转）
- rotateZ()——（3D）指定元素沿Z轴旋转（平面翻转）
- rotate3d()——（3D）指定元素3D旋转
前四个方法接受一个角度(deg)参数，正角度值时顺时针旋转，负角度值时逆时针旋转
后一个方法接收四个参数，前三个参数是一个0-1之间的数值，最后一个参数是角度
transform:rotate(100deg);伸缩变换
- scaleX()——（2D）指定元素沿X轴（水平）缩放比例
- scaleY()——（2D）指定元素沿Y轴（垂直）缩放比例
- scale()——（2D）指定元素沿X轴和Y轴的缩放比例
- scaleZ()——（3D）指定元素沿Z轴的缩放比例
- scale3d(x,y,z)——（3D）指定元素的缩放比例
前两个方法接收一个数值参数，后一个方法接收两个数值（第一个参数对应X轴，第二个对应Y轴（省略则默认为第一个参数）），参数无单位，表示倍数
transform:scaleX(2);
transform:scale(10,2); 扭曲变换
- skewX()方法——（2D）指定元素沿X轴（水平）扭曲
- skewY()方法——（2D）指定元素沿Y轴（垂直）扭曲
- skew()方法——（2D）指定元素沿X轴和Y轴扭曲
前两个方法接收一个角度(deg)参数，后一个方法接收两个参数（第一个参数对应X轴，第二个对应Y轴（省略则默认为0））
transform:skewX(20deg);
transform:skew(10dge,20deg); 矩阵变换
transform:matrix(a,b,c,d,e,f);
transform:matrix3d(a,b,c,d,e,f....);以上的几个方法，本质上都是应用matrix()方法实现的，只是前者更利于理解罢了
2. transform-origin属性（CSS3新增）
- 作用：指定元素变换的原点
- 默认值：50% ，50%（center，center）
- 适用于：所有块级元素及某些内联元素
- 继承性：无
- 动画性：有
- 取值：长度值、百分比、left、right、top、bottom、center
接收两个参数，第一个用于横坐标，第二个用于纵坐标，如果只提供一个，则该值用于横坐标，纵坐标自动获得50%
transform-origin :let top;3. transform-style属性（CSS3新增）
- 作用：指定如何显示元素的子元素
- 默认值：flat
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：flat（子元素将不保留其 3D 位置）、preserve-3d（子元素将保留其 3D 位置）
4. perspective属性（CSS3新增）
- 作用：指定3D元素距视图的距离
- 默认值：none
- 适用于：3D变换元素
- 继承性：有
- 动画性：有
- 取值：none、不带单位的数值
注：要想使3D变换生效，必须要指定其父元素的perspective属性和transform-style属属性
5. perspective-origin 属性（CSS3新增）
- 作用：指定定义 3D 元素所基于的 X 轴和 Y 轴
- 默认值：50% 50%
- 适用于：3D变换元素
- 继承性：无
- 动画性：有
- 取值：长度值，百分比，left，right，top，bottom，center
6. backface-visibility属性（CSS3新增）
- 作用：指定当元素不面向屏幕时是否可见
- 默认值：visible
- 适用于：3D变换元素
- 继承性：无
- 动画性：有
- 取值：visible、hidden
二. 过渡（transition）
1. transition-property属性（CSS3新增）
- 作用：指定元素参与过渡的属性
- 默认值：all
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 动画性：有
- 取值：none、all（选择所有可以进行过渡的属性）、具体属性值
可以同时指定多个属性值，以逗号分隔即可
transition-property : all;
transition-property : width,color;2. transition-duration属性（CSS3新增）
- 作用：指定元素过渡的持续时间
- 默认值：0
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 动画性：有
- 取值：秒（s）和毫秒(ms)
同样，如果指定了多个属性要过渡，那么，可以指定多个过渡时间，也要以逗号分隔
transition-duration : 2s;3. transition-timing-function属性（CSS3新增）
- 作用：指定元素过渡的动画类型
- 默认值：ease
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 动画性：有
- 取值：linear(线性过渡)、ease（平滑过渡）、ease-in（先慢后快）、ease-out（先快后慢）、ease-in-out（慢到快再到慢）....贝塞尔曲线....
示例：
transition-timing-function : ease;4. transition-delay属性（CSS3新增）
- 作用：指定元素过渡开始的延迟时间
- 默认值：0
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 动画性：有
- 取值：秒（s）和毫秒(ms)
同样，如果指定了多个属性要过渡，那么，可以指定多个延迟时间，也要以逗号分隔
transition-delay : 2s;5. 简写transition属性（CSS3新增）
作用：指定元素过渡
默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
继承性：无
动画性：有
取值：看每个独立属性
可以为同一个元素的多个属性定义过渡效果
transition：color 2s ease 2s;
/*可以做出等待效果*/
transition: width 2s linear 0,height 2s linear 2s;三. 动画（animation）
使用动画之前， （详见语法规则篇）
@keyframes mydemo {
0% { transform: translate(0, 0); }
40% { transform: translate(40px, 0); }
80% { transform: translate(80px, 0); }
100% { transform: translate(100px, 20px); }
}1. animation-name属性（CSS3新增）
作用：设置元素要使用的动画名称
默认值：none
适用于：所有元素，包含伪对象:after和:before
继承性：无
取值：none、已定义的动画名称
可以为同一个元素指定多个动画，只需使用逗号分隔即可
animation-name：mydemo;
animation-name：mydemo1,mydemo2; 2. animation-duration属性（CSS3新增）
- 作用：指定动画的持续时间
- 默认值：0
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：秒和毫秒
如果提供多个属性值，以逗号进行分隔
animation-duration：2s;3. animation-timing-function属性（CSS3新增）
- 作用：指定动画的过渡类型
- 默认值：ease
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：linear(线性过渡)、ease（平滑过渡）、ease-in（先慢后快）、ease-out（先快后慢）、ease-in-out（慢到快再到慢）....贝塞尔曲线....
如果提供多个属性值，以逗号进行分隔
animation-timing-function：ease;4. animation-delay属性（CSS3新增）
- 作用：指定动画的延迟时间
- 默认值：0
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：秒和毫秒
如果提供多个属性值，以逗号进行分隔
animation-delay：2s;5. animation-iteration-count属性（CSS3新增）
- 作用：指定动画的循环次数
- 默认值：1
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：数字值（具体循环次数）和infinite（无线循环）
如果提供多个属性值，以逗号进行分隔
animation-iteration-count：2;
animation-iteration-count：infinite;6. animation-direction属性（CSS3新增）
- 作用：指定动画在循环中是否反向运动
- 默认值：normal
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：normal、alternate（正反向交替）
如果提供多个属性值，以逗号进行分隔
animation-iteration-count：2;反向播放也消耗一次迭代次数，所以如果把animation-iteration-count设为1，则该属性没有效果
7. animation-play-state属性（CSS3新增）
- 作用：指定动画运行还是暂停
- 默认值：running
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：running、pasued
如果提供多个属性值，以逗号进行分隔
animation-play-state:running;可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画
w3c正考虑是否将该属性移除，因为动画的状态改变可以通过其它的方式实现，比如重设样式
8. animation-fill-mode属性（CSS3新增）
- 作用：指定动画结束时的状态
- 默认值：none
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：none、forwards、backwards、both
none——恢复原始状态
forwards——设置元素状态为动画结束时的状态
backwards——设置元素状态为动画开始时的状态
both——设置元素状态为动画开始或结束时的状态
如果提供多个属性值，以逗号进行分隔
animation-fill-mode:forwards;9. 简写animation属性（CSS3新增）
- 作用：指定动画效果
- 默认值：看每个独立属性
- 适用于：所有元素，包含伪对象:after和:before
- 继承性：无
- 取值：看每个独立属性
如果提供多组属性值，以逗号进行分隔
animation:demo 2s linear 2s 2 normal running;
animation:demo 2s linear 2s 2 normal running
，demo2 2s linear 2s 2 alternate running;注：简写属性包含六个属性，不包含animation-fill-mode
注：至少指定前两个属性，没有名称、没有时长都不会执行动画