transform、transition、animation动画效果

transform(变形)
transition(过渡)
animation(动画)

一、transform：直接改变大小和位置，显示改变的结构，没有过渡和变形的时间

transform:rotate(360deg) scale(-1.2,1.2) translate(100px,50px) skew(45deg,45deg)

通过transition:transform 1s 指定对transform起动画效果

（1）旋转rotate

利用css变形属性可以将对应的属性旋转对应的角度，可以顺时针旋转，逆时针（负值）旋转，可以3D旋转，3D旋转可以分别绕X轴Y轴Z轴旋转；

（2）缩放scale

负值为先翻转，再缩放对应的倍数，可以在X、Y、Z上做缩放

（3）位移translate

可以在X、Y轴上做平移，或者同时在X、Y、Z轴上做平移

（4）斜切skew

能够让元素倾斜显示，本质上是可以让X、Y轴倾斜一定程度

二、transition（过渡）：会有一个形变的过程，会有过渡和形变时间

第一个属性值表示动画变换的时间，第二个属性值代表延时

扫描二维码关注公众号，回复： 13592889 查看本文章

transition:transform 1s 指定对transform 起效果

transition:margin 1s 指定对margin 起效果

transition：width 1s,height 1s 1s;

速度曲线贝塞尔曲线

transition: 1s linear 匀速

transition: 1s esae-in 匀加速

transition: 1s ease-out 匀减速

infinite为无限次数循环。

三、animation(动画)

animation是一个过渡的过程，引入了帧的概念，定义keyframes动画，然后绑定一个或者多个动画。transition有点像他的简化版，animation也可以实现transition变化某个属性的功能

并且可以去设置动画的播放时间（animation-duration），播放方式（animation-timing-function，播放速度），播放次数，播放方向（在不同次数，发生不同方向的动画，比如从左到右，然后从右到左），播放后的状态（会到初始状态，还是结束状态）控制动画状态（控制某物体暂停或执行动画）

transition和animation主要区别：

transition也可以看做animation的缩略版，他们实现的功能有重复的地方，比如说要实现某个div的宽度有30rem变到20rem,两者都可以实现。

兼容：

div{ 
    animation:mymove 5s infinite;
     -webkit-animation:mymove 5s infinite;
     /* Safari 和 Chrome */ 
} 
@keyframes mymove {
     from {left:0px;} 
     to {left:200px;} 
 }
 @-webkit-keyframes mymove /*Safari and Chrome*/ { 
    from {left:0px;} 
    to {left:200px;} 
}

引入网页动画库：

<div class="a animated jello"></div>

两者一定要一起写，否则就会造成某个方向的滚动条，具体看代码：

overflow-y:scroll;

overflow-x:hidden;

移动端当设计图为750px而字体大小为20像素左右时，需要对包着字体的盒子和字体大小放大两倍，然后缩小为scale(0.5),因为屏幕320时会使字体小于8px导致无法缩小，此时还要注意中心点的位置，用transform-origin:left ,top;否则盒子的位置会跑