animation和transform 相关内容和兼容性

最近老是需要制作很多动画，年会的跨年，汽车启动，财神到神马的

 CSS3 animation 属性
1、IE10 开始支持的。
2、针对版本低的现代游览器最好使用前缀（-webkit-，-moz-，-o-）。
3、IE9 可以用JS的 setTimeOut 等函数来解决动画。
4、IE6，7，8 游览器推荐用jQuery动画，当然旋转等高级动画是不行的，因为rotate属性是IE9开始支持的。
5、不支持css3的游览器上不要勉强用，网页执行效率极差。

取值：

 animation-name 

检索或设置对象所应用的动画名称

animation-duration

检索或设置对象动画的持续时间

animation-timing-function

检索或设置对象动画的过渡类型

animation-delay 

检索或设置对象动画延迟的时间

animation-iteration-count

检索或设置对象动画的循环次数

animation-direction

检索或设置对象动画在循环中是否反向运动

animation-fill-mode

检索或设置对象动画时间之外的状态

animation-play-state

检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

兼容性写法： 

.rotateCD{ 
-webkit-animation: myrotate 9.5s infinite linear; 
-moz-animation: myrotate 9.5s infinite linear; 
-ms-animation: myrotate 9.5s infinite linear; 
-o-animation: myrotate 9.5s infinite linear; 
 animation: myrotate 9.5s infinite linear; 
-webkit-animation-play-state: running; 
-moz-animation-play-state: running; 
-ms-animation-play-state: running; 
-o-animation-play-state: running; 
animation-play-state: running; 
} 

 

@charset utf-8;  一般在CSS文件中 会规定字符编码 

/* common: rotateCD */ 

@-webkit-keyframes myrotate{
    0%{
        -webkit-transform : rotate(0deg);
    }
    100%{
        -webkit-transform : rotate(360deg);
    }
}
@-moz-keyframes myrotate{
    0%{
        -moz-transform : rotate(0deg);
    }
    100%{
        -moz-transform : rotate(360deg);
    }
}
@-ms-keyframes myrotate{
    0%{
        -ms-transform : rotate(0deg);
    }
    100%{
        -ms-transform : rotate(360deg);
    }
}
@-o-keyframes myrotate{
    0%{
        -o-transform : rotate(0deg);
    }
    100%{
        -o-transform : rotate(360deg);
    }
}
@keyframes myrotate{
    0%{
        transform : rotate(0deg);
    }
    100%{
        transform : rotate(360deg);
    }
}

 

（opera浏览器还有个比较怪异的地方，它偏爱@keyframes myrotate{...}，而对@-o-keyframes myrotate{...}不感冒，所以你发现两者只存其一的时候，前者可以实现动画，而后者不能实现动画效果。我一直对此很是不解，后来找到关于opera的介绍，说它是严格的执行W3C网页标准。）

关于transform ：

    transform 的浏览器兼容的问题。

国内大多数用户在手机移动端端的浏览器基本是微信、QQ、UC、百度浏览器、360、Safari、安卓自带浏览器（很少人用）

　　　　　　　　　　PC端的浏览器则是Chrome、IE、QQ、360、FF。这些浏览器在处理transform的时候，到底哪些是需要加浏览器前缀，加怎样的前缀呢？自己花了一点时间整理了浏览器 transform 支持情况：

下面是从蜗牛博客上（http://wnworld.com/archives/170.html）copy的一段代码：

让用户得到好的体验而保证浏览器不出现bug，我们最可靠的方式就是获取浏览器的前缀，然后通过前缀的方式来执行事件！那怎么得到浏览器的前缀!怎么获取呢？通过getVendorPrefix来获取：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function getVendorPrefix() {     var body, i, style, transition, vendor;     body = document.body || document.documentElement;     style = body.style;     transition = "transition";     vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];     transition = transition.charAt(0).toUpperCase() + transition.substr(1);     i = 0;     while (i < vendor.length) {         if (typeof style[vendor[i] + transition] === "string") {           return vendor[i];         }         i++;     }     return false; }

执行的结果如下：

      相比pc端，移动端的浏览器明显都是webkit的天下，所以移动端基本可以毫无顾虑使用css3属性！所以我们可以简单的处理一下浏览器的兼容的问题：

1 2 3 4

//value可以是 translate|rotate|scale|matrix|perspective|skew function setTransform(elem,value){     elem.style[getVendorPrefix()+"Transform"]=value }

很年多前的笔记 ，有空再来修改吧