1.简述transform, transition, animation 的作用

(1)transform:描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix。 /* Keyword values /transform: none; / Function values /transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); / Multiple function values / transform: translateX(10px) rotate(10deg) translateY(5px); / Global values */ transform: inherit;transform: initial;transform: unset;

(2)transition 样式过渡，从一种效果逐渐改变为另一种效果 transition 是一个合写属性。 Transition: transition-property transition-duration transition-timing-function transition-delay 从左到右分别是：css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间 transition 通常和 hover 等事件配合使用，需要由事件来触发过渡 例如： /第一个值为方向，第二个值为时间/ transition: width 1s; /宽度变化为1s/ ​ /所有的变化都是1s/ transition： all 1s; ​ /第三个参数为变化方式：/ transition： width 1s liner; /线性变换/ ​ /第四个参数为延迟/ transition： width 1s liner 3s;/三秒的延迟/

(3)animation动画： 由@keyframes 来描述每一帧的样式。 具体语法： /先用@keyframes声明一个变量/@keyframes 动画名字{ /声明过渡效果/ from{ /开始效果/ } to{ /结束效果/ }

/*或者定义中间多个过度效果*/
0%{
  	/*过度效果*/  
}
33.3% 66.6%{
     /*过度效果*/  
}
100%{
     /*过度效果*/  
}}

使用方式： /之后再通过animation属性把定义的样式加上/div{ animation: 动画名字 1s(过度时间);}

(4)相同： transition 和 animation 两者都能实现动画效果。 transform 常常配合 transition 和 animation 使用。 (5)不同： transition 通常和 hover 等事件配合使用，animation 是自发的，立即播放。 animation 可设置循环次数 animation 可设置每一帧的样式和时间，transition 只能设置头尾。 transition 可与 js 配合使用，js 设定要变化的样式，transition 负责动画效果