transform：改变
transform的使用注意点
1.transform一般会配合transition（过渡）一起使用，来实现动画效果。
2.transform不适用于inline元素，需要先转变成block。
3.transform包括其他CSS属性：不能追加，只会覆盖！！！
4.transform有多个值：transform: translateX(10px) rotate(10deg) translateY(5px);
5.rotate、scale、translate可以单独作为一个CSS属性，独立控制transform中各自的效果。
transform的4个功能
1. translate：位移，移动元素的位置
常用写法：
translate() = translate( <length-percentage> , <length-percentage>? ) /* (x,y) */
translateX() = translateX( <length-percentage> )
translateY() = translateY( <length-percentage> )
translateZ() = translateZ( <length> ) /* 父元素需要一个perspective属性来确定视点位置 */
translate3d() = translate3d( <length-percentage> , <length-percentage> , <length> ) /* (x,y,z) */
/* 1.<length-percentage>意思为：该值可以是一个具体值，或者是一个百分数，百分数和元素本身大小关联
2.<length-percentage>?这里的？意思为可以省略。
*/
translate的使用小技巧：
1.实现元素在父元素中居中：
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
2.translate的效果比直接改变元素的left属性性能更加高级，高级前端不用left做动画
2. scale：缩放
常用写法：
scale() = scale( <number> , <number>? )
scaleX() = scaleX( <number> )
scaleY() = scaleY( <number> )
/* <number>是缩放比例，scale() 只写一个 <number>横纵向同比缩放 */
scale使用技巧：
1.scale缩放会将border也同时缩放。
2.一般很少使用，因为会出现模糊的情况。
3. rotate：旋转
常用写法：
rotate() = rotate( [ <angle> | <zero> ] )
rotateX()>= rotateX( [ <angle> | <zero> ] )
rotateY() = rotateY( [ <angle> | <zero> ] )
rotateZ() = rotateZ( [ <angle> | <zero> ] )
rotate3d() = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
/*
常用<angle>：deg--度数 turn--周
*/
rotate使用技巧：
1.一般用于制作loading图案。
4. skew：倾斜
常用写法：
skew() = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
skewX() = skewX( [ <angle> | <zero> ] )
skewY() = skewY( [ <angle> | <zero> ] )
skew使用技巧：
1.太吃想象力一般不使用。
transition：过渡
transition的语法
transition CSS 属性是 属性名：transition-property，过渡时长：transition-duration，过渡动态曲线：transition-timing-function 和 过渡延迟：transition-delay 的一个简写属性。
1.属性名：transition-property
指定过渡的属性，可以是一个或某几个具体属性(逗号分隔属性过渡方式)transition: margin-right 4s,,width 2s;；也可以是all所有属性 transition: all 0.5s ease-out;。
2.过渡时长：transition-duration
过渡经历的时间，单位：s ms。
3.过渡动态曲线：transition-timing-function
常用：ease，ease-in，ease-out ， ease-in-out，linear，cubic-bezier(0.1, 0.7, 1.0, 0.1)，step-start，step-end，steps(4, end)，具体参考MDN
4.过渡延迟：transition-delay
执行过渡动画之前延迟的时间。
transitionend
transitionend事件，在CSS完成过渡后触发。
transition实现多个关键帧过渡
1个transition只能实现2个关键帧的过渡，当要实现2个以上的关键帧的过渡时，我们使用多个transform
transition的使用注意点
1.transition的作用是补充2个样式变化之间的帧数。
2.有些属性无法过渡，如：display无法过渡。
3.一般只有1次动画或者2次。如：hover状态前后。
animation：动画
如何实现多个关键帧的过渡？
1个transition只能实现2个关键帧的过渡，当要实现2个以上的关键帧的过渡时，我们使用多次transform：
.a ===transform==> .b
.b ===transform==> .c
一般通过setTimeout或者监听transitionend来判断关键帧的中间点。但是使用多次transform来实现多个关键帧的动画时，太过复杂，效率低下，所以通常我们使用animation来实现多关键帧的动画效果。
2种方式的比较
animation的使用步骤
1.@keyframes声明动画关键帧MDN
- keyframes:关键帧；@keyframes xxx，这个xxx是自定义的动画名
- 当只有2个关键帧的时候，使用from to声明2个关键帧
- 当有多个关键帧时，通过百分数定义动画不同时段的关键帧
2.animation调用声明的动画
animation和transition一样是多个属性的缩写。animation属性是animation-name，animation-duration,animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode和animation-play-state属性的一个简写属性形式。animation:过渡时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名- 过渡时长 | 过渡方式 | 延迟 参考
transition - 次数：可以设定动画执行的次数，可以是整数、小数或者infinite（无限）
- 方向：reverse | alternate | alternate-reverse 分别对应：反向过渡，交替过渡，反向交替过渡。
- 填充模式：none | forwards | backwards | both forwards可以让动画最后停留在最后一帧，backwards则是停留在起始一帧。具体看animation-fill-mode
- 动画状态：paused | running，暂停，运行（恢复）动画
- 动画名：步骤1. 声明的动画名。
@keyframes与animation的关系
@keyframes声明的是一个动画的效果，而animation控制的是如何完成这个动画效果。
