transform(变形)，transition(过渡)，animation(动画)
一、transform：直接改变大小和位置，显示改变的结构，没有过渡和变形的时间
transform:rotate(360deg) scale(-1.2,1.2) translate(100px,50px) skew(45deg,45deg)
（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（过渡）：会有一个形变的过程，会有过渡和形变时间
eg:
.first{
left:110px;
top:0;
-webkit-transition-property:left,top,background;
-webkit-transition-duration:1s,2s,2s;
-webkit-transition-delay:0,0,2s;
-webkit-transition-timing-function:ease,ease-in,linear;
}
.first:hover{
left:310px;
top:200px;
background:red;
}
三、animation（动画）：
同样的也是一个过渡的过程，引入了帧的概念，定义keyframes动画，然后绑定一个或者多个动画。transition有点像他的简化版，animation也可以实现transition变化某个属性的功能
并且可以去设置动画的播放时间（animation-duration），播放方式（animation-timing-function，播放速度），播放次数，播放方向（在不同次数，发生不同方向的动画，比如从左到右，然后从右到左），播放后的状态（会到初始状态，还是结束状态）控制动画状态（控制某物体暂停或执行动画）
- transition和animation主要区别在哪？
transition也可以看做animation的缩略版，他们实现的功能有重复的地方，比如说要实现某个div的宽度有30rem变到20rem,两者都可以实现。
//transition的方法
div{width:30rem;transition:width 1s ease}
div:hover{width:20rem}
//animation的方法
div{aninmation:demo 1s ease}
@keyframes mymove
{
from {width:30rem;}
to {width:20rem;}
}
ps:虽然两者有相似的部分，但是实现的概念和出发点是不一样的，transition是着重于属性的变化，而animation重点是在时间轴和关键帧,是在于创建帧，让不同帧在不同的时间节点发生不同变化，基于animation和@keyframe 的动画一方面也是为了实现表现与行为的分离，另一方面也使得前端设计师可以专注得进行动画开发而不是冗余的代码中。
网友评论