Css3动画浏览器兼容问题

Css3动画属性浏览器兼容的写法

在css发展的过程中,当一些新得css属性刚出来的时候,还没有成为业界认可的标准(有可能永远都不会成为标准),于是各个浏览器开发者选择采用一些用于自己测试的属性,这些属性只在自己所开发的浏览器上被支持,而在其他浏览器上不支持。于是这些属性前面都加上了独特的前缀。
常见的谷歌浏览器和Safari浏览器的前缀为 -webkit-
火狐浏览器(Firefox)的前缀为 -moz-
Opera浏览器的前缀为 -o-
IE浏览器的前缀为 -ms-
而Css3动画是比较新的属性,在一些版本比较旧的浏览器上不被支持,因此在用到动画的时候需要考虑对低版本浏览器的兼容的问题。这时的解决办法是,在w3c标准的属性写法前加上带前缀的属性。
这里有我的前一个博客里面对于具体做法的例子。
而在这里我要说明的一个点是,考虑到兼容问题会极大程度上增加我们的代码量。在我上面这个博客的例子里可以看到,为了兼容低版本的浏览器,我的代码从16行增加到了43行,而且这是我已经去掉不必要的代码之后的代码。
问题的关键就在于,当我使用带有前缀@keyframes的时候,这个内部的代码是否也需要给某些属性添加前缀。
下面我们就来看一看常用的动画中会使用到的属性的浏览器兼容图。Css3动画浏览器兼容问题_第1张图片
Css3动画浏览器兼容问题_第2张图片
Css3动画浏览器兼容问题_第3张图片
Css3动画浏览器兼容问题_第4张图片
从这些图里面我们都可以看到,如果当前版本的浏览器已经支持w3c标准的 @keyframes 和animation 属性,那么其他的属性都已经支持了w3c标准,不需要添加前缀。而如果当前版本需要加前缀的话,其他属性也都加上前缀就可以了。因为高版本的浏览器,是能够兼容低版本的浏览器支持的写法的。
譬如,我的谷歌浏览器版本是72.0 。
Css3动画浏览器兼容问题_第5张图片
我写一个div来使用-webkit-border-radius这个属性

<div class="test">div>
.test{
	width: 100px;
	height: 100px;
	-webkit-border-radius: 50%;
	background: white;
}

这个⚪仍然能够正常的显示。
Css3动画浏览器兼容问题_第6张图片
所以,@keyframes 和 animation 属性带前缀,下面的其他动画属性也带一样的前缀即可,如果不带前缀,其他属性也不用带前缀。

你可能感兴趣的:(前端学习-动画)