文章标题

在浏览器差异下 css3属性的写法

> 在说css这三个属性前，要先讲一讲js，这对于理解这三个属性值为什么这么写有很大的好处。javascrit一共由三部分组成，javascript核心，BOM（Bowser Object Modal浏览器对象模型）和DOM（文档对象模型）。
> 就目前来说javascript核心是最为统一的，而另外两个modal随着浏览器的不同而主要分为四种，FireFox的-moz、Safari和Chrome的-webkit、Opera的-o以及IE的-ms，由于浏览器的不同，不同的浏览器在解析网页时效果也具有差异（以IE为最，分为三个阶段：IE4、IE89、IE9+），所以像我们在java代码的业务处理中我们要考虑到程序可能发生的各种异常状况，并且对它进行处理，使得我们的程序更为健壮一样，我们也需要对网页效果在不同浏览器的差异进行处理，尽可能保证我们的业务的实用性。
在一般的css样式和js代码中对于这些浏览器的差异感受并不深，但是通过css的动画属性实现网页的动态效果时这些就避不开了，在这里举几个属性，animation、transform、keyframes,这三个属性通过巧妙地搭配就可以构成很多的动态效果，毕竟transform太强大了，translate、rotate、scale、skew等属性值配上animation可以做出很多ppt里面的效果出来，我们来看小例子：

//Safari和Chrome
@-webkit-keyframes animations3{
    0%{-webkit-transform:translate(160px);opacity:0;}
    50%{-webkit-transform:translate(130px);opacity:1;}
    70%{-webkit-transform:translate(125px);opacity:1;}
    100%{-webkit-transform:translate(100px);opacity:0;}
}
//Firefox
@-moz-keyframes animations3{
    0%{-moz-transform:translate(160px);opacity:0;}
    50%{-moz-transform:translate(130px);opacity:1;}
    70%{-moz-transform:translate(125px);opacity:1;}
    100%{-moz-transform:translate(100px);opacity:0;}
}
//Opera
@-o-keyframes animations3{
    0%{-o-transform:translate(160px);opacity:0;}
    50%{-o-transform:translate(130px);opacity:1;}
    70%{-o-transform:translate(125px);opacity:1;}
    100%{-o-transform:translate(100px);opacity:0;}
}
//IE8-9
@-ms-keyframes animations3{
    0%{-ms-transform:translate(160px);opacity:0;}
    50%{-ms-transform:translate(130px);opacity:1;}
    70%{-ms-transform:translate(125px);opacity:1;}
    100%{-ms-transform:translate(100px);opacity:0;}
}
//IE9+ etc... modern browser
@keyframes animations3{
    0%{transform:translate(160px);opacity:0;}
    50%{transform:translate(130px);opacity:1;}
    70%{transform:translate(125px);opacity:1;}
    100%{transform:translate(100px);opacity:0;}
}

这段代码主要用于实现一个对象45deg的移动和透明度改变的效果，这段代码在动画中opacity是没有进行浏览器差异处理的，实际上这很有可能导致一部分使用IE8以前和其他浏览器老版本的用户没有办法看到我们透明度的效果。下面给出透明度处理的代码：

//older safari/Chrome browser
-webkit-opacity:0.5;
//Netscape and Older than Firefox 0.9
-moz-opacity:0.5;
//Safari 1.x(pre webkit) 老式的khtml内核的safari
-khtml-opacity:0.5;
//IE9+ etc and modern browser
opacity:0.5;
//IE4-9
filter:alpha(opacity = 50);

加入到对象中

.a3{
    //safari and chrome
    -webkit-transform:translate(100px);
    -webkit-animation:animations3 2s ease-out 2s;
    //firefox
    -moz-transform:translate(100px);
    -moz-animation:animations3 2s ease-out 2s;
    //opera
    -o-transform:translate(100px);
    -o-animation:animations3 2s ease-out 2s;
    //IE8-9
    -ms-transform:translate(100px);
    -ms-animation:animations3 2s ease-out 2s;
    //IE9+ etc. and modern browser
    transform:translate(100px);
    animation:animations3 2s ease-out 2s;
}

我们可以在这里看到我们提前写好了使得对象移动的代码，相信大家都看过柯南，给我印象最深的是，柯南每一集都能从小的线索中发现真相，在大的方向不错的情况下，每一个细节都极其重要，加入了动画效果后，加入我们提前写好位置的代码，会出现，对象产生了移动，但是移动后又回到了原来的位置，这样给人的感觉就会很突兀，在css代码中是先运行关于动画的代码，然后再运行位置的代码，我们将对象的位置改变到动画效果产生以后的位置，这就很perfect了。
关于这三个属性的值可以在[W3CSchool](http://www.w3school.com.cn/)的官网中看到，以及一些具体的用法。也有很多大神们通过css3的新属性写了很多酷炫的效果，以后会慢慢分享出来，开发在于积累，但愿酒香常怡人。