一、动画执行 animation

animation: name（动画名称） duration（动画时长） timing-function（动画运行属性） delay （多长时间之后开始） iteration-count（运行几次） direction（是否倒序执行） fill-mode （动画停止位置）;

动画时长： animation-duration： 1s 可以设置多少秒,动画时长为1秒
动画运行属性： animation-timing-function：

值	描述
linear	（动画从头到尾的速度是相同的）
ease	（默认。动画以低速开始，然后加快，在结束前变慢。）
ease-in	（动画以低速开始。）
ease-out	（动画以低速结束）
ase-in-out	（动画以低速开始和结束。）

多长时间之后开始: animation-delay： 1s 可以设置多少秒：1秒之后开始执行动画
运行几次： animation-iteration-count： 5 运行多少次，如5次， infinite（无限次）
是否倒序执行： animation-direction：

值	描述
normal	（默认值。动画按正常播放。）
reverse	（动画反向播放。）
alternate	（动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 ）
alternate-reverse	（动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。）

动画停止位置： animation-fill-mode：

值	描述
backwards	（动画停止是否回到初始位置）
forwards	（动画停止是否留在当前位置）
none	（默认值。动画在动画执行之前和之后不会应用任何样式到目标元素）

animation-play-state： paused（指定暂停动画） running（指定正在运行的动画）

二、动画设计 @keyframes

@keyframes name（动画名称）{ keyframes-selector（动画持续时段） { 动画样式 } }

动画名称： 自己定义的动画名称，在执行动画时必须得是这里定义的名称
动画持续时段： 动画阶段性的样式 ，合法值：0-100% from (和0%相同) to (和100%相同)
动画样式：设置样式即可

 实例：@keyframes mymove {
                0%   {top:0px;}
                100% {top:100px;}
         }

三、 动画 2d 3d

变形掌握 transform

值	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
translate3d(x,y,z)	定义 3D 转化
scale3d(x,y,z)	定义 3D 缩放转换。
rotate3d(x,y,z,angle)	定义 3D 旋转
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

//******************** 不常用属性 *********************************

规定 3D 元素的透视效果 perspective
规定 3D 元素的底部位置 perspective-origin
perspective:150px; （z轴的透视大小）
perspective-origin: 50% 50%; （控制透视的左右上下，初始值为50% 50%）

规定被嵌套元素如何在 3D 空间中显示 transform-style
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。