CSS3动画animation、3D动画（一）

1CSS3动画animation

CSS3使用animation实现动画，主要由两个部分组成通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。

调用动画和使用设置；animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-directionanimation-fill-modeanimation-play-state

:animation-name        由@keyframes创建的动画名称☆

animation-duration        过渡时问（填写秒数） ☆

animation-timing-function        过渡方式linear、ease、ease-in、ease-out、ease-in-out

animation-delay        延迟时间☆

animation-iteration-count        动画的播放次数,默认值为1,特殊值infinite,表示动画无限次播放

animation-direction        动画的播放方向,alternate为偶数次向前播放，就是到达100%关键帧后以原来的运行轨道倒回去,normal则是到达100%关键帧后回到一开始的地方重新运行。

animation-fill-mode:backwards ;选择动画结束时候的模式是会到原来的位置（默认值是backwards会返回原来的位置）还是回结束（forwards表示会停在结束的位置）的位置

animation-play-state: paused; 网页动画自动播放时，我的鼠标摸上.div1会让里面的.icon动画播放暂停  running：网页动画不自动运行时，默认动画是暂停的手摸上去之后让动画开始跑

animation-iteration-count: 3; 默认动画执行三次

列如：

 <style>

        /* 设置关键帧 @keyframes 关键帧名称 {

                                                                        0%在动画运动占全程运动的百分比时间{css样式}

                                                                        在动画运动占全程运动的百分比时间{css样式}