目录
过渡
CSS效率极高，其变化过程往往都是在一瞬间完成，速度极快。
transition
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
transition是一个简写属性，用于的有：
transition-property
transition-duration
transition-timing-function
transition-delay
默认值：
transition-property:all
transition-duration:0s
transition-timing-function:ease
transition-delay:0s
在该属性中，各个值的书写顺序是很重要的。第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。
transition-property
默认值为all，表示所有可被动画的属性都表现出来过渡动画
可以指定多个property
属性值：
none
没有过渡动画
all
所有可被动画的属性
IDENT
属性名称（可以指定多个）
transition-duration
属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为0s，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。
如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。
以上两种情况下，属性列表都会保持不变
属性值：
以毫秒或秒为单位的数值
<time>类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是0s，表示不回呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位！
transition-timing-function
CSS属性受到transition的影响，会产生不断变化的中间值，而CSS transition-timing-function属性用来描述这个中间值是怎样计算的。实质上，通过则这个函数会建立一条加速度曲线，因此，在整个transition变化过程中，变化速度可以不断改变。
默认值：ease
可以规定多个timing-function，通过使用transition-property属性，可以根据主列表（transition-property的列表）给每个CSS属性应用相应的timing-function。
如果timing-function的个数比主列表中的数量少，缺少的值被设置为初始值（ease）。
如果timing-function的个数比主列表中的数量多，timing-function函数列表会被裁减。
以上两种情况下声明的CSS属性都是有效的
属性值：
ease：加速然后减速
linear：匀速
ease-in：加速
ease-out：减速
ease-in-out：加速然后减速
cubic-bezier：贝塞尔曲线
step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[start|end])
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
transition-delay
该属性规定了过渡效果开始作用之前要等待的时间。
默认值：0s
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的CSS属性。
如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。
以上两种情况下，属性列表都保持不变
属性值：
值以秒或毫秒为单位，表用动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
检查过渡是否完成
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件为 transitionend ，在webkit下是webkitTransitionEnd
每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件
在transition完成前设置 display:none ，事件同样不会触发
过渡注意事项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
height: 100px;
width: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition-property:width;
transition-duration: 2s;
transition-timing-function: linear;
}
body:hover #test{
transition-property: height;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>由于CSS的渲染速度极快，渲染布局的过程比解析代码的过程慢，导致有一个时间差，导致一些效果会与想象的不符。
transition在元素首次渲染还没有结束的情况下是不会被触发的
在绝大部分变换样式切换时，如果变换函数的位置或个数不相同时也不会触发过渡
2D变形
transform属性允许修改CSS视觉格式模型的坐标空间，该属性只对块级元素有效。
旋转（rotate）
正值：顺时针旋转 rotate(360deg)
负值：逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
平移（translate）
X方向平移：transform:translateX(tx)
Y方向平移：transform:translateY(ty)
二维平移：translate:translate(tx[,ty])；如果没有指定ty，则其默认值为0。
可设单值，也可设双值
正数表示XY轴正向平移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变。
倾斜（skew）
X方向倾斜：transform:skewX(angle)
skew(45deg)：参数值以deg单位 代表与Y轴之间的角度
Y方向倾斜：translate:skewY(angle)
skew(45deg)：参数值以deg为单位 代表与X轴之间的角度
二位倾斜：translate:skew(ax[,ay])；如果ay为提供，在Y轴上没有倾斜
第一个参数代表与Y轴之间的角度，第二个参数代表与X轴之间的角度
正值：拉正斜杠方向的两个角；负值：拉反斜方向的两个角
缩放（scale）
X方向缩放：transform:scaleX(sx)
Y方向缩放：transform:scaleY(sy)
二维缩放：transform:scale(sx[,sy])；如果sy未指定，默认认为和sx的值相同
注意：缩小设置0.01 - 0.99之间的值，放大设置超过1的值
例如：
缩小一倍 transform:scale(.5);
放大一倍 transform:scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5,1)
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1,.5)
正值：缩放程度；负值：不推荐使用（有旋转效果）
单值：表示只为X轴，Y轴上缩放力度一样
基点变换
transform-origin
该CSS属性让你更改一个元素变形的基点（对位移无效）
矩阵
在2D变换中，矩阵变换函数 matrix() 接受6个值，语法形式如下：
transform:matrix(a,b,c,d,e,f);
| 效果 | 某一元素应用变换 | 矩阵变换函数 |
|---|---|---|
| 旋转 | rotate(θ) | matrix(cosθ,sinθ,-sinθ,cosθ,0,0) |
| 平移 | translate(X,Y) | matrix(1,0,0,1,X,Y) |
| 倾斜 | skew(α, β) | matrix(1, tanβ, tanα,1, 0, 0) |
| 放缩 | scale(scaleX, scaleY) | matrix(scaleX, 0, 0, scaleY, 0, 0) |
组合变换
矩阵的运算是不可逆的，矩阵不满足交换律
变换组合时，计算方向是从右往左进行计算的
/*矩阵运算：(矩阵乘法)
从左往右：
1 0 100 50 150
0 1 0 50 50
0 0 1 1 1
.5 0 0 150 75
0 .5 0 50 25
0 0 1 1 1
从右往左：
.5 0 0 50 25
0 .5 0 50 25
0 0 1 1 1
1 0 100 25 125
0 1 0 25 25
0 0 1 1 1
*/
/*(50,50)----->(125,25)*/
body:hover #test1{
transform:translateX(100px) scale(.5);
}
/*(50,50)----->(75,25)*/
body:hover #test2{
transform:scale(.5) translateX(100px);
}
7481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
