CSS3动画

CSS3动画：可通过设置多个节点精确控制一个或者一组动画，常用实现复杂的动画效果。

1.设置关键帧（定义动画）

@keyframes 名称{

0%{transform:translatex(10px);}

100%{transform:translatex(100px);}

}

@keyframes 名称{

from{transform:translate(0,0);}

to{transform:translate(100px,0);}

}

动画序列：0%是开始，100%是完成。百分比取值为1-100，整数即可。里面的百分比就是总的时间的划分。

动画序列：from是开始，to是完成。

2.调用关键帧（调用动画）

animation：名称（必填）

animation-duration：持续时间（秒为单位，默认0，必填）

animation-timing-function:速度曲线（默认ease）

animation-delay：开始时间（默认0）

animation-iteration-count：播放次数（默认是1，infinite无限次播放）

animation-direction：是否反方向播放（默认是normal；alternate;逆播放 反方向再播放）

animation-fill-mode：规定动画结束后的状态（默认是backwards 回到起始状态；forwards停留在结束状态）

animation-play-state：规定动画是运行或暂停（默认是running；paused停止；）

CSS 3D转换

特点1.近大远小 2.物体后面遮挡不可见

三维坐标系：X轴 Y轴 Z轴（外面是正值 里面是负值）

3D位移：

translatex(100px);

translatey(100px);

translatez(100px);注意：translatez一般用px单位

translate3d(x,y,z)；

选择器{

 transform：translatex(100px)  translatey(100px)  translatez(100px);简写中间用空格隔开；

}

注意：xyz不能省略 没有就写0；

透视|视距：perspective 近大远小

视距就是人的眼睛到屏幕的距离；单位是像素px；

透视距离越小，物体越大；距离越大，物体就越小；

透视写在被观察的元素的父元素里；

想要网页产生3D效果需要先透视