0_6 CSS的animation

1、过渡transition

过渡：指定一个属性（需要具体值）发生变化时的切换方式

transition-property: 指定要执行过渡的属性

transition-duration: 指定过渡效果的持续时间

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡

transition-timing-function: 过渡的时序函数

transition 可以同时设置过渡相关的所有属性，但必须持续在前，延迟在后

             比如　transition: margin-left  2s  1s cubic-bezier(.24,.95,.82,-0.88);

 

2、动画animation

animation-name: 要对当前元素生效的关键帧的名字

animation-duration: 动画的执行时间

animation-delay: 动画的延时

animation-timing-function: ease-in-out;

animation-iteration-count 动画执行的次数（具体值 或者 infinite）

。。。。。。

（随用随查吧）

3、变形transform

通过CSS来改变元素的形状或位置，不会影响到页面的布局

平移：平移元素，　　若用百分比是相对于自身计算的

　　translateX() 沿着x轴方向平移

       translateY() 沿着y轴方向平移

       translateZ() 沿着z轴方向平移，z轴平移需要给html设置视距（如perspective:800px）

 

旋转：通过旋转可以使元素沿着x y 或 z旋转指定的角度

           rotateX()

           rotateY()

           rotateZ()

缩放：对元素进行缩放的函数，值为原大小倍数

　　（可以绑定一个:hover，并且父元素的overflow: hidden;　　鼠标悬停时有放大效果）

　　　　变形的原点 默认值 center，可以改变（如 transform-origin:20px 20px）

             scaleX() 水平方向缩放

             scaleY() 垂直方向缩放

             scale() 双方向的缩放