CSS动画相关属性以及变形

动画相关属性

1.过渡动画

transition复合属性

transition-property 指定对html元素哪个css属性及逆行平滑渐变处理

transition-duration:指定平滑渐变持续时间

transition-timing-function:渐变的速度 支持如下几个值

ease动画开始时较慢，然后速度加快，达到最快时再减慢速度

linear先行速度，动画开始到结束速度保持不变

ease-in 动画开始时较慢，然后速度加快

ease-out动画开始时最快，然后速度减慢

2.帧动画 animation

animation-name设置动画名称

animation-duration:指定平滑渐变持续时间

animation-timing-function:渐变的速度 支持如下几个值

ease动画开始时较慢，然后速度加快，达到最快时再减慢速度

linear先行速度，动画开始到结束速度保持不变

ease-in 动画开始时较慢，然后速度加快

ease-out动画开始时最快，然后速度减慢

animation-delay:指定动画多长时间后执行，延迟

animation-direction设置动画的方向 alternate(交替)

animation-iteration-count:设定动画执行的次数 infinite无限次

关键帧的定义

@keyframes aaa{

from |to|百分比{

属性：值;

from是开始状态，to是结束状态

animation aaa 4s(动画时长) linear 2s(延迟时间)

调用动画的取值不分先后，如果有两个时间，第一个表示动画时长，第二个表示延迟时间

---

变形

变形 transform 该属性用于设置变形，该属性支持一个或多个变形函数 变形函数如下

1.移动 translate:(tx ,ty) 表示html元素沿着x 轴移动tx距离，沿y轴移动ty距离，如果省略ty默认为0

translate:(tx ,ty，tz) html元素沿x，y,z移动tx,ty,tz距离

2.缩放

scale(sx,sy) 表示元素沿x轴缩放比sx，沿y轴缩放比sy，如果省略sy则认为sy=sx

scale3d(sx,sy,sz)元素沿x,y,z缩放

scaleX(sx)

scaleY(sy)

scaleZ(sz)

3.旋转

rotate(angle) 元素沿着z顺时针旋转angle角度 默认是 z

rotateX()

rotateY()

rotateZ() 和默认一样

rotate3d(s,y,z,angle) 元素绕指定轴旋转

4.倾斜

skew(xAngle [,yxAngle]) html元素沿着x和y倾斜 xAngle,yAngle角度，y省略

5.设置变形中心点 transform-origin设置变形中心点，属性值可以是百分比，px等具体的值，也可以是top bottom

6.3d透视效果，近大远小 perspective作用在父级元素上，值越小，3d 效果越明显

transform-style： preserve-3d 子元素保留3d位置

flat 不保留（默认）

7. 3d背面是否可见 backface-visibility取值如下

visible 背面可见（默认）

hidden 背面隐藏