标签兼容性以及动画和过度

现在的浏览器五花八门，不再是IE独掌天下了，所以要考虑到网页的兼容性，因此现有的标签要对此作出说明。

总结：

1.谷歌及苹果等浏览器：-webkit-

2.火狐浏览器：-moz-

3.Opera：-o-

新标签

1.过度的标签：transition

使用方法：transition：这里填写需要更改的属性名称    这里填写过渡的时间。

也可以直接填写transition:all 2s；意思是所有效果的过渡时间都为2s。

2.动画：animation

使用方法：首先，声明标签-webkit-animation：变量名称（自定） 动画时间    循环方式；然后在其后对声明的动画名称进行描述，@-webkit-keyframes 变量名{这里做描述}

例如：.div:hover{

-webkit-animation:hehe 5s infinite;}表示动画共有5秒，一直循环。

@-webkit-keyframes hehe

{

from{color:red;}

to{color:yellow;}

}表示字体从红色变为黄色，动画过程有5秒。from和to也可以使用时间百分比表示。

infinite表示无限循环，forwards X表示循环X次。

rotate是旋转的意思，是动画的一种，单位是deg度。

transform是翻转动画。

linear表示动画的进行是线性的。

3.引用字体：@font-face{}

使用方法：@font-face{

font-family:给引用的字体命名；

src="引用字体文件的保存路径"；

}

这样之后在CSS之中直接用font-family引用之前命名好的字体就可以了。