CSS3 animation&perspective属性

一、animation属性

1、定义：animation属性通过调用关键帧声明的动画 实现更为复杂的动画效果

2.运用步骤

（1）设置关键帧

@keyframes freedom（名字自定义）{

0%{自定义样式属性}

50%{自定义样式属性}

100%{自定义样式属性}

（2）调用关键帧

animation: name duration delay timing-function iteration-count direction

(1)animation:iteration 表示动画播放的次数，默认值为1， 特殊值为infinite,表示无限次播放动画

(2)animation:direction 表示动画播放的方向，normal表示动画每次循环向前播放，alternate表示当动画偶数次播放时向前播放

（3）例子

 二、perspective属性

1、定义：perspectiv表示透视，其只影响3D转换元素。可以理解为眼睛距离物体的距离。

2、运用

 3、如果想让子元素有3D效果，需要给父元素添加

transform-style:preserve-3d