animation和transform 相关内容和兼容性-CFANZ编程社区

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

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);
    }
}

animation和transform 相关内容和兼容性_html

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

关于transform ：

transform 的浏览器兼容的问题。

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

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

animation和transform 相关内容和兼容性_css_02

下面是从蜗牛博客上（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``;` `}`

执行的结果如下：

animation和transform 相关内容和兼容性_移动端_03

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

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

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