CSS 动画相关属性的兼容总结:
1.animation/keyframes 浏览器支持情况:
2.transform 2D 浏览器支持情况:
3.transform3D/perspective 浏览器支持情况
4.transition 浏览器支持情况:
可以看到动画在 IE8(这里主要讨论 IE)及以下完全不支持, IE9 由于只支持 transform(非 transform3d)所以也和 CSS 动画 say goodbye 了. 但是项目一定要兼容 IE9, 这是可以采取优雅降级的方式
举个例子
一个元素在页面加载时渐进入页面, 而 IE9 不支持 animation 和 transform3d 以及 transition, 所以一个的方案就是让 IE9 没有动画(主要就是让 IE9 下元素呆在动画结束的最后位置), 这里元素初始状态需要在画面外并且是隐身
- <div class="a"></div>
- <style>
- div {
- width: 100px;
- height: 100px;
- background: #3ea5ff;
- }
- .a { /*a 初始化元素动画前样式及加入动画 */
- transform: translate3d(-300px,0,0);/* 现代浏览器下移开元素 */
- -ms-transform: translate3d(-300px,0,0);/*IE10 + 下移开元素 */
- opacity: 0;/* 透明元素 */
- opacity:1\9\0; /*IE9hack, 是元素不透明 */
- animation: leftIn .7s ease-out forwards;
- }
- @keyframes leftIn {
- 0% {transform: translate3d(-300px,0,0);opacity: 0}
- 100% {transform: translate3d(0,0,0);opacity: 1}
- }
- </style>
主要是 translate3d, 因为 IE9 不支持自然会忽略掉, 所以 transform,animation 也在 IE 下不起效了, opacity 等简单属性做个 hack 即可.
接下来第二种方案, 使用 JS 动画代替, 首先要判断浏览器支不支持要用到的 CSS 属性, 判断函数如下:
- function isSupportThis(attrName) {
- var prefixs = ['webkit', 'Moz', 'ms', 'o'],
- i,
- humpString = [],
- htmlStyle = document.documentElement.style,
- // 将 animation-delay 这种带杠转化为 htmlStyle 中的驼峰属性名
- toHumb = function (string) {
- return string.replace(/-(\w)/g, function ($0, $1) {
- return $1.toUpperCase();
- });
- };
- for (i in prefixs) {
- humpString.push(toHumb(prefixs[i] + '-' + attrName))
- };
- humpString.push(toHumb(attrName));
- for (i in humpString) {
- if (humpString[i] in htmlStyle) return true
- };
- return false
- }
- isSupportThis('animation') // IE9 下 false
如果不支持的话就对 $('.a')做下动画处理, 当然, 如果动画元素很多且很杂, 我们可以事先对那些要进行动画的元素统一加上 class="animation" 之类的后面好处理, animation-delay 之类的也可以用 delay()代替.
聊一下 CSS hack
刚刚提到的 IE9 的 CSS hack \9\0, 那么 IE 其他版本的 CSS hack 表示形式是怎样的呢?
条件注释法
这种方式是 IE 浏览器专有的 Hack 方式, 微软官方推荐使用的 hack 方式. 举例如下
只在 IE 下生效
<!--[if IE]>
这段文字只在 IE 浏览器显示
<![endif]-->
只在 IE6 下生效
<!--[if IE 6]>
这段文字只在 IE6 浏览器显示
<![endif]-->
只在 IE6 以上版本生效
<!--[if gte IE 6]>
这段文字只在 IE6 以上 (包括) 版本 IE 浏览器显示
<![endif]-->
只在 IE8 上不生效
<!--[if ! IE 8]>
这段文字在非 IE8 浏览器显示
<![endif]-->
非 IE 浏览器生效
<!--[if !IE]>
这段文字只在非 IE 浏览器显示
<![endif]-->
类内属性前缀法
属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀, 以达到预期的页面展现效果.
IE 浏览器各版本 CSS hack 对照表
说明: 在标准模式中
"-″减号是 IE6 专有的 hack"\9″ IE6/IE7/IE8/IE9/IE10 都生效
"\0″ IE8/IE9/IE10 都生效, 是 IE8/9/10 的 hack"\9\0″ 只对 IE9/IE10 生效, 是 IE9/10 的 hack
选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器, 在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀进行 hack.
目前最常见的是
HTML 前缀只对 IE6 生效
+HTML + 前缀只对 IE7 生效
@media screen\9{...}只对 IE6/7 生效
@media \0screen {body { background: red; }}只对 IE8 有效
@media \0screen\,screen\9{body { background: blue; }}只对 IE6/7/8 有效
@media screen\0 {body { background: green; }} 只对 IE8/9/10 有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对 IE9/10 有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对 IE10 有效等等
参考:
来源: http://www.qdfuns.com/article/50494/6bf936fef01a97f38041475e16eaaa1b.html