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来获取：

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属性！所以我们可以简单的处理一下浏览器的兼容的问题：

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

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

posted @ 2020-11-17 15:06 明媚下雨天阅读(679) 评论(0) 编辑收藏举报

刷新页面返回顶部

明媚下雨天

animation和transform 相关内容和兼容性

取值：

公告