animation动画及3D

一、animation动画

animation动画简介

animation实现动画主要由两个部分组成

通过类似Flash动画的关键帧来声明一个动画

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

  浏览器支持

属  性  名   IE      Firefox    Chrome    Opera     Safari

animation  10+       5.0+       4.0+           12+       4.0+

关键帧 例如：

@keyframes spread {

   0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

 }

@keyframes的浏览器兼容性

属  性  名           IE          Firefox   Chrome   Opera    Safari

@keyframes     10+         5.0+         4.0+         4.0+    12.0+

写兼容的时候浏览器前缀是放在@keyframes中间

例如：@-webkit-keyframes（兼容谷歌）、@-moz-keyframes（兼容火狐）

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

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

          animation–duration                 过渡时间

          animation-timing-function         过渡方式

linear          规定以相同速度开始至结束的过渡效果

ease  规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-o