Css3过渡动画

过渡动画

css3的 transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元 素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 分别属性设置

• transition­-property：检索或设置对象中的参与过渡的属性

• transition-­duration：检索或设置对象过渡的持续时间

• transition­-delay：检索或设置对象延迟过渡的时间

• transition-­timing-­function：检索或设置对象中过渡的动 画类型,默认ease

简写 :

• transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

最简写

• transition:运动时间s/ms

变形属性 transform

1.位移: 相当于position:relative的效果

• translate(x,y)

• translateX(x)

• translateY(y)

2.缩放

• scale(x,y)

x,y代表缩放的倍数,小数代表缩小,大于1代表放大,如果只有一个值,代表是x,y同时缩放一样的倍数

• scaleX(x)

• scaleY(y)

3.旋转

• rotateX(ndeg)

• rotateY(ndeg)

• rotate(ndeg)

4.斜切

• skewX(ndeg)

• skewY(ndeg)

• skew(xdeg,ydeg)

transform­-origin

改变变形远点的位置:

语法 :transform­-origin : x y

• 方向关键字: left top right center bottom

• 百分比

• length

transform-­style

其中flat值为默认值，表示所有子元素在2D平面呈现。

preserve­-3d表示所有子元素在3D空间中呈现。

3d不能搭配overflow:hidden使用, 如果使用overflow:hidden, 相当于值是flat

景深

语法 : perspective() 取值一般为500px-1200px

程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）

3d transform

1.位移 :

• translate3d(x,y,z)

• translateZ(z)

2.旋转rotateZ(zdeg)

rotate3d(x,y,z,a)(x,y,z建议取值0或1)

• x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

• y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

• z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

• a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆 时针旋转。

3.缩放

• scaleZ(z)

• scale3d(x,y,z)

注：scaleZ()和scale3d()函数单独使用时没有任何效果， 需要配合其他的变形函数一起使用才会有效果

帧动画

第一步:制作运动动画的轨迹 ,需要配合animation绑定到选择器一起使用。

@keyframes run(动画名称){ 
    0%{ 
        transform:translateX(0); 
    }
    100%{
        transform:translateX(400px);
    } 
} 
​
如果插入两帧可以用 from to关键字 还可以用0% 100%, 如果插入多帧,用百分比

第一步 :调用动画轨迹

1.animation-­name 检索或设置对象所应用的动画名称

2.animation­-duration 检索或设置对象动画的持续时间

3.animation-­timing­-function 检索或设置对象动画的过渡类型

linear/ease/ease­in/ease­out

4.animation-­delay 检索或设置对象动画延迟的时间

• 正值的时候是停了多久开始运动

• 负值是立刻开始运动，且进行到设定时间的位置

5.animation­-iteration-­count 检索或设置对象动画的循环次数

• number | infinite(无限次)

6.animation­-direction 检索或设置对象动画在循环中是否反向运动

• normal：正常方向

• reverse：反方向运行

• alternate：动画先正常运行再反方向运行，并持续交替运行

• alternate-­reverse：动画先反运行再正方向运行，并持续 交替运行

复合写法：

animation: name duration timing­function delay iteration­ count direction fill­mode;

animation和transition的区别

相同点：都是随着时间改变元素的属性值。

不同点：

• transition需要触发一个事件(hover事件或click事件等)才会 时间改变其css属性；

而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果.