Css3动画浏览器兼容问题
Css3动画属性浏览器兼容的写法
在css发展的过程中,当一些新得css属性刚出来的时候,还没有成为业界认可的标准(有可能永远都不会成为标准),于是各个浏览器开发者选择采用一些用于自己测试的属性,这些属性只在自己所开发的浏览器上被支持,而在其他浏览器上不支持。于是这些属性前面都加上了独特的前缀。
常见的谷歌浏览器和Safari浏览器的前缀为 -webkit-
火狐浏览器(Firefox)的前缀为 -moz-
Opera浏览器的前缀为 -o-
IE浏览器的前缀为 -ms-
而Css3动画是比较新的属性,在一些版本比较旧的浏览器上不被支持,因此在用到动画的时候需要考虑对低版本浏览器的兼容的问题。这时的解决办法是,在w3c标准的属性写法前加上带前缀的属性。
这里有我的前一个博客里面对于具体做法的例子。
而在这里我要说明的一个点是,考虑到兼容问题会极大程度上增加我们的代码量。在我上面这个博客的例子里可以看到,为了兼容低版本的浏览器,我的代码从16行增加到了43行,而且这是我已经去掉不必要的代码之后的代码。
问题的关键就在于,当我使用带有前缀@keyframes的时候,这个内部的代码是否也需要给某些属性添加前缀。
下面我们就来看一看常用的动画中会使用到的属性的浏览器兼容图。
从这些图里面我们都可以看到,如果当前版本的浏览器已经支持w3c标准的 @keyframes 和animation 属性,那么其他的属性都已经支持了w3c标准,不需要添加前缀。而如果当前版本需要加前缀的话,其他属性也都加上前缀就可以了。因为高版本的浏览器,是能够兼容低版本的浏览器支持的写法的。
譬如,我的谷歌浏览器版本是72.0 。
我写一个div来使用-webkit-border-radius这个属性
<div class="test"></div>
.test{width: 100px;height: 100px;-webkit-border-radius: 50%;background: white;
}
这个⚪仍然能够正常的显示。
所以,@keyframes 和 animation 属性带前缀,下面的其他动画属性也带一样的前缀即可,如果不带前缀,其他属性也不用带前缀。
Css3动画浏览器兼容问题相关推荐
- html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- 解决css3动画效果在360兼容模式跟猎豹浏览器下不兼容
360跟猎豹采用的都是谷歌(WebKit内核)跟IE(Trident内核)的双内核,360浏览器分为极速模式(WebKit内核)和兼容模式(Trident内核),这就导致兼容模式下不支持css3动画效 ...
- html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
- safari浏览器兼容css3旋转同时位移处理
safari浏览器兼容css3旋转同时位移处理 项目某元素同时执行 位移+旋转时,谷歌浏览器等其他浏览器正常,safari浏览器不兼容(pc和苹果手机一样) 网络方案 (一) (亲测 然并卵 ~~) ...
- webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
当前我们在写css样式的时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如: 直接写个: .className{display: flex; } 想变成下面这种的 .classN ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
最新文章
- keras 的 example 文件 antirectifier.py 解析
- Winform中设置ZedGraph当前所有曲线的颜色
- 具体knn算法概念参考knn代码python实现
- mysql设置参数0和1_MySQL 8.0 首个自适应参数横空出世
- 【渝粤题库】陕西师范大学152212 政府绩效管理 作业(专升本)
- [react] 举例说明在react中怎么使用样式
- 国际最具潜力IT专业认证
- (软件工程复习核心重点)第七章软件维护-第三节:软件可维护性
- django-模型类管理器
- Delphi开发中增删改查操作以及存储过程的调用方式
- api 原生hbase_hbase之java api实战一
- DevExpress 创建EXCEL
- pp助手苹果版_微商相册助手ios版下载-微商相册助手苹果版下载v1.0.8
- matlab实对称矩阵对角化,基于Matlab的实对称矩阵对角化
- 【windows下基于Eclipse和GCC搭建stm32开发环境(4)】STM32启动过程详解
- 华为网络设备查看设备温度状态检查命令方法
- 计算机睡眠与切换用户的区别,小白教你电脑休眠和睡眠的区别
- 背包问题(旅游记得带零钱)
- 个人配置环境和跑代码的一些坑
- 华为路由器和交换机在BootROM下清除Console口密码