css 2D动画

1.过渡-transition

复合属性：transition 取值all 5s linear 3s

含义：css3的transition允许css的属性在一定的时间区间内平滑的过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变种触发，并圆滑的以动画效果改变css的属性值
​
all====单一属性：transition-property:检索或设置对象中的参与过渡属性 
代表某个属性发生告别时，才有过渡显示效果
all代表观察多个值不支持在一个属性中写height，width的多个值一起写
​
5s====单一属性:transition-duration:检索或设置对象过渡的持续时间
动画的变化时间
​
3s====单一属性：transition-delay:检索或设置对象延迟过渡的时间
延迟时间，例如鼠标移动上去多久产生变化
​
linear====单一属性：transition-timing-function:检索或设置对象中过渡动画的动画类型
linear   匀速变化
​
简写:
transition:all/具体属性值  运动时间s/ms   延迟时间s/ms  动画类型
​
****display:none/block属性无法被支持

2.过渡动画类型

transition-timing-function:检索或设置对象中过渡的动画类型

linear    匀速
ease      逐渐慢下来
ease-in   加速
ease-out  减速
ease-in-out   先加速后减速
​
贝塞尔曲线：
属性值：cubic-bezier()
贝塞尔曲线网址：http://cubic-bezier.com/
逐帧动画：transition-timing-function:steps(动画执行的步数);

3.动画过渡单一属性

复合属性：transition取值：all 5s linear 3s;

含义：css3的transition允许css的属性值在一定时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变css的属性值
​
all=====单一属性：transition-property:检索或设置对象中参与过渡动画的属性
5s=====单一属性：transition-duration:检索或设置对象过渡的持续时间
liner======单一属性transition-delay:检索设置对象中过渡的动画类型
3s=====单一属性：transition-timing-function:检索或设置对象延时过渡的时间

简写：

transition：all/具体的属性值如height 运动时间s/ms 延迟时间s/ms 动画类型

具体的属性值无法在复合写法中也多个单独的属性但可以在单一属性中设置多个属性值

例：transition-property:height background width;

表示检索，高度，宽度，背景

4.2D属性-transform

1.平移-translate（）

将元素向指定的方向移动，类似于position中的relative

水平移动：向右移动translate（tx，0）和向左移动translate（-tx，0）;
​
垂直移动：向上移动translate（0，-ty）和向下移动translate（0，ty）;
​
对角移动：右下角移动translate（tx,ty）,右上角移动translate（tx，-ty），左上角移动translate（-tx，-ty）和左下角移动translate（-tx，ty）
​
translateX（）：水平方向移动一个对象。对象