css过渡和动画属性

css过渡
transition：执行变换的属性 变换延续时间 变换速率 延迟时间;

1. property(执行变换的属性): all 或指定某一个color,wdith

可以同时指定多个属性，分别设置不同过渡时间
transition：width 2s, height 1s linear (可以设置多个，不写的属性未默认值)
transition-property: width, height;
transition-duration: 500ms , 1s

3. duration(变换延续时间)：0.1s 1s
4. timing-function(变换速率)：

ease逐渐慢下来
linear匀速
ease-in由慢到快
ease-in-out先慢到快再到慢
cubic-bezier(自定义曲线
steps(分n步完成过渡) steps(2,start) 在时间开始时执行

4. delay(延迟时间，可以不写)：1s
5. 过渡结束触发事件

// 过渡完成前  元素被display:none 则不触发回调
el.addEventListener('transitionend', function() {
	console.log('过渡元素的每个属性过渡结束都会触发一次回调')
})

transform变形：仅对块级元素有效

1. translateXYZ：移动 translateX(50px)
2. rotateXYZ：旋转 rotate(30deg) 度数为正,顺时针旋转。度数为负 逆时针旋转
3. scale：缩放 scale(0.5,2) (x轴比例,y轴比例)
4. skew：扭曲 (x轴度数, y轴度数)

坐标轴x向右是正方向
坐标轴y向下是正方向
坐标轴z向外是正方向
旋转后坐标轴随着元素旋转，移动方向随着坐标轴方向 变形的基准点
坐标轴原点是左上角 默认是中心点 ：transform-origin:100% 100%;

3D变形：想呈现3D变形效果需要给父元素设置transform-style:preserve-3d;
补充：是否显示元素的背面 backface-visibilty:hidden;

animation：动画名称 动画时间 动画速率 延迟时间 播放次数 是否轮流反向播放
@keyframes:关键帧 ----设置关键帧最少有两帧:form-to或者0%-100%
@keyframes move{
0%{}
100%{}
}

1. animation-name：动画名称
2. animation-duration：执行时间
3. animation-timing-function：速率曲线

linear动画从头到尾的速度是相同的
ease默认。动画以低速开始，然后加快，在结束前编慢 ease-in动画以低速开始
ease-out动画以低速结束 ease-in-out动画以低速开始和结束
cubic-bezier(n,n,n,n)在函数中有自己的值。可能是从0到1的数值

4. animation-delay：延迟时间

允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
设置了 animation-dealy 为负值的动画会立刻执行，开始的位置是其动画阶段中的一个阶段。
例如：一个被定义执行 3s 的动画，如果 animation-delay 为 -1s，起点相当于正常执行时，第2s（3-1）时的位置。

5. animation-iteration-count：动画播放次数 infinite（无限的）默认是1
6. animation-direction：是否轮流反向播放

alternate从from 向 to 返回执行
normal从 from 向 to 执行一次
reverse从 to 向 from执行一次

7. animation-fill-mode：对象动画时间之外的状态

forwards:保持最后一个关键帧的状态
backwards:回到第一个关键帧的状态
none默认回到初始状态

用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。
第一种方法 ：
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);
第二种方法 ：
当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法
(webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)