| Warren's

动画

坐标系: x(向右为正向),y(向下为正向),z(垂直界面向外为正向);视角都是从正方向往负方向看,顺时针为正度数;

animation: animation-name, animation-duration, animation-timing-function(速度曲线), animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

(1)时间要带单位，合并写的时候顺序可以不一致延迟时间要在后面；

@keyframes animation-name {}

animation-timing-function: ease逐渐变慢, linear匀速,ease-in慢快,ease-out快慢,ease-in-out慢快慢,cubic-bezier(x,x,x,x)快慢看斜率；  

animation-iteration-count: 次数 | infinite;

animation-direction: normal | reversse(从最后一帧到第一帧执行动画) | alternate(执行到最后一帧后按照原有动画轨迹反向执行到第一帧) | alternate-reverse(结合两种);

animation-fill-mode: forwards | backwards | both  默认none

forwards 等待期为初始样式，完成期为最后一帧样式
backwards 等待期为第一帧样式，完成期为初始样式
both 等待期为第一帧样式，完成期为最后一帧样式

animation-play-state: 执行(默认)还是暂停

jQuery Easing 插件是实现缓动函数最简单的方法

$(selector).animate(styles,speed,easing(缓动),callback)

transition: (设置过渡效果的 CSS 属性的名称默认all) transition-duration(s/ms) transition-timing-function(速度曲线) transition-delay(定义过渡效果何时开始)

只有safari要加-webkit-其他的不加或不支持。

多个属性值动画效果设置示例：transition: height 2s,width:2s;

transform: 当旋转时坐标轴会一起转，注意 rotate 与 translate 语句的前后顺序

正度数：顺时针；负度数：逆时针；默认原点为对象旋转中心；

rotate(1deg) 二维的沿xy;

rotate3d(1deg) 按（0，0，0）与（x，y，z）组成的单位向量轴转；

rotateX/Y/Z（1deg）三维的沿X/Y/Z轴转;

transform-style:preserve-3d;子元素将保留其3d位置
transform-origin：x y z;改变元素的原点位置，默认是在中心
translate() 移动当使用的是百分比的时候会是按照当前元素的内容区和padding和边框的宽高来计算；

translate(x,y) 沿xy方向的偏移量 translate3d(x,y,z)

webkit-perspective-origin:x y //只有webkit内核支持

定义3D元素所基于的X轴和Y轴的改变改变3D元素的底部位置,改变的就是视点的位置;

perspective:(景深和视距) 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。
不允许负值; 但针对它的子元素，不是本身,当子元素在它的内部区域的不同地方时，从同一个视角，显示的效果也会不同；

backface-visibility:visible|hidden
控制当前元素旋转到背面对着我们的视角时是否显示

# 动画

动画