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及其相关属性

1. transition-property: 为指定的属性设置动画效果。(默认为all，即两个动做间产生变化的全部属性都发生做用。示例：transition-property:color;)

2. transition-duration:设置动画历时(默认是0s)

3. transition-timing-function:设置动画方式（默认是ease）

4. transition-delay:设置动画延时(默认是0s)

5. 简写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

待添加