CSS动画

1.animation动画 由两个部分组成：①设置关键帧 ②调用关键帧

关键帧 例如：

@keyframes donghua {

0% {width:0;}

50% {width:40px;}

100% {width:80px;} }

调用关键帧： animation: donghua   3s linear 0.5s infinite alternate;

infinite：循环播放

alternate ：原样返回

2.视距（可以理解是物体距离自己的眼睛的距离，距离越短，会感觉物体更大）

translate3d  { 里面分别表示x轴距离 y轴距离 和z轴距离}

要想实现3d效果必须要在父元素加上 perspective

perspective可以理解为物体离自己的距离。z轴值越大就像物体离自己越近。

*z轴值如果大于视距的话，就像物体越来越近最后穿过了。（一般不设置大于视距）

3.transform-style属性

让子元素有3d的效果，就要在父元素设置 transform-style：preserve-3d

默认值是flat：效果如下：

使用了transform-style：preserve-3d，3d效果：