transform，transition,animation

`transform`，`transition`,`animation`三者的区别？

1.transform是单独的形变，偏移，而transition和animation都加上了时间属性，所以能够产生动画效果。
2.transition的动画效果一般由行为(hover,js等)触发，而animation则是自动触发。
3.transition的动画效果只有两帧关键帧，而animation可以有更多帧。

`transform`及其相关属性

1.translate沿着x轴偏移的最好示例
两个属性的顺序不同，造成的效果也是不同
图片描述

2.如何改变旋转的中心点左上角？
transform-origin:0 0；（默认起始点是transform-origin:50% 50%;）
图片描述

3.如何让y轴旋转有3D效果?
在父元素上面加上perspective：length;

4.如何改变透视效果？
perspective-origin：
图片描述

5.如何进行3d的移动和zoom？
transform:translate3d(x,y,z);z轴移动的视觉效果是，近大远小.前提是父元素有pespective属性；
transform:scale3d(x,y,z);scaleZ与transformZ同用，能缩放或放大transformZ的比例。

transform:rotate3d(x,y,z,deg)
图片描述

6.当你想保存一个transform元素的子元素的3d空间可以怎么做？
transform-style:preserve-3d;（默认为flat，使用在具有transform属性的元素上，作用其子元素。）
图片描述

7.如果你想要一个transform平面的背面不可见，可以怎么做？
backface-visibility:hidden;（默认为visible,使用并作用于transformable elements）
图片描述

`transition`及其相关属性

transition-property: 为指定的属性设置动画效果。(默认为all，即两个动作间产生变化的所有属性都发生作用。示例：transition-property:color;)
transition-duration:设置动画历时(默认是0s)
transition-timing-function:设置动画方式（默认是ease）
transition-delay:设置动画延时(默认是0s)
简写transition:上面四个属性可以出现1-4个；

`animation`及其相关属性

由于浏览器的兼容性，需要在animation相关属性前加上前缀-webkit-,-moz-,-o-
1.animation-name:动画名称（初始值为none）
命名规则: 由字母，数字，-，_组成，且必须以字母开头，区分大小写。
示例：

div{-webkit-animation-name:abc;}
@-webkit-keyframes abc{
    0%{left:0;top:0;}
    50%{left:250px;top:100px;}
    100%{left:500px;top:0;}
}

附上@keyframes 语法

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

2.animation-duration:设置动画时间(初始值0s)
3.animation-timing-function:设置动画时间函数(初始值ease，表示中间快，两头慢)
4.animation-iteration-count:infinite | <number> 设置动画次数（初始值1）
5.animation-direction：normal | reverse | alternate | alternate-reverse 设置动画开始的位置(初始值为normal)
6.animation-play-state:running | paused 设置动画运行还是停止（初始值为running）
7.animation-delay:<time># 设置动画延时(默认是0s)
8.animation-fill-mode:none | forwards | backwards | both 设置动画执行前后是否把动画样式第一帧和最后一帧设置到动画元素上面（初始值为none），通常设置为both;
9.简写animation:上面八个属性可以出现1-8个，可设置多个；

常见应用demo

待添加

transform，transition,animation