HTML——过渡动画(2D)

#一，过渡：transition

过渡属性就是用来规定元素属性值发生变化时的一种渐变效果，包括过渡时长，渐变的速度曲线，还有延时效果。
####transition的各个属性及其说明

1. transition-property

规定设置过渡效果的 CSS 属性的名称。(必选值)

2. transition-duration

规定完成过渡效果需要多少秒或毫秒。(必选值)

3. transition-timing-function

规定过渡过程中的速度曲线
|可选值|说明|
|–|--|
|ease|默认值；规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)|
|linear|规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）|
|ease-in|规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）|
|ease-out|规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）|
|ease-in-out|规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）|
|cubic-bezier(n,n,n,n)|在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值|

4. transition-delay:

定义过渡效果何时开始，也就是延时多少秒或多少毫秒再开始动画，默认0

代码举例

div{
    width: 200px;
    height: 200px;
    background-color: red;
    /*定义宽度变化时的过渡，其中过渡时间为两秒，速度曲线为匀速，延时0.3秒开始*/
    transition: width 2s linear .3s;
}
/*当鼠标移动到div上时，宽度和高度都从200px增加的400px*/
div:hover{
    width: 400px;
    height: 400px;
}

上面的代码，当你把鼠标移动到div上面时，div的宽高都增加到400px
但是宽的增加是一个渐变的过渡变化，而高度增加是瞬间变化，没有过渡效果

####二，多属性的过渡写法

1. 多属性写法

比如上面的代码，给width的变化定义了一个过渡效果
现在我们要给height也定义了

transition: width 2s linear .3s,height 1s;

上面的代码在给宽度定义了过渡效果的同时也给height定义了一个过渡效果
height的过渡效果只写了两个值(属性名称和过渡时间)
另外两个值(速度曲线和延时 时间)，这两个值应用了本身的默认值ease和0
相当于transition: width 2s linear .3s,height 1s ease 0;

2. 全部属性写法

transiton: all 2s;

例如上面的代码
就是给所有的属性变化定义了一个过渡时间为2s的过渡效果
也就是当所有支持过渡的属性的属性值发生变化时都会有这个过渡效果

#2D过渡动画
####偏移方法：translate(valueX,valueY)

translate()接受两个参数，第一个代表水平方向的偏移量，第二个单表垂直方向的偏移量
其中正直分别代表向右和向下偏移，反之负值代表向左和向上偏移

div{
	transform: translate(-10px,20px);
}

上面的代码让div向上偏移了10px，向又偏移了20px
当然也可以用其他的长度单位例如em或者百分比

translate也可以单独设置一个方向

translateX(value)：代表了X轴(水平方向)的偏移
translateY(value)：代表了Y轴(垂直方向)的偏移

####旋转方法：rotate(value)

rotate() 是旋转的方法，其中正值顺时针旋转，负值逆时针旋转

div{
	transform: translate(30deg);
}

上面的代码让div顺时针选择30度， deg是角度单位

####缩放方法：scale(valueX,valueY)

scale()的参数和translate差不多，分别代表水平方向和垂直方向的缩放
当值大于1时放大，小于1时缩小，
当值为负数的时候，元素会发生翻转

div{
	transform: scale(1.5,.5);
}

上面的代码让div宽度(水平上)扩大到了1.5倍，高度(垂直上)缩小到原来的0.5倍

scale也可以单独设置一个方向

scaleX(value)：代表了X轴(水平方向)的缩放
scaleY(value)：代表了Y轴(垂直方向)的缩放

####扭曲方法：skew(valueX,valueY)

skew()的参数和translate也差不多，分别代表水平方向和垂直方向的扭曲
扭曲的效果比较难形容，所以这里就不说了

div{
	transform: skew(10deg,20deg);
}

上面的代码让div水平上扭曲了10deg，垂直上扭曲了20deg

scale也可以单独设置一个方向

skewX(value)：代表了X轴(水平方向)的扭曲
skewY(value)：代表了Y轴(垂直方向)的扭曲

####多个方法同时使用

当你设置偏移的同时需要设置设置选择或其他transform方法时
可以各方法之间用空格隔开

transform: scale(1,.5) translate(100px,100px);