CSS3与动画有关的属性transition、animation、transform对比(史上最全版)


Posted in HTML / CSS onAugust 18, 2017

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。

索性在这里进行一个简单的对比,加深自己的记忆。

浏览器兼容性

CSS3 transform 属性

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

CSS3 animation 属性 

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

用法:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

CSS3 transition 属性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

用法:

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;

其他对比

transition和animation属于动画属性,transform属于静态属性。
根据英文单词的理解:转换,变换,transform主要指位移、大小、位置、形状的转换,直接写该属性变换,得到的就是变换后的形状和位置。
transition和animation因为都属于动画属性,所以都具有以下
property
duration
timing-function
delay

属性、动画时间、动画形式、延迟时间对于animation,property变成了动画的名称animation独有的属性有:

animation-iteration-count
animation-direction
 一个要定义动画播放的次数,一个为定义动画是否轮流反向播放

简写形式对比:

transition属性:过渡,即css变化的过程的过渡,所以定义transition属性的意义为,当定义过transition的属性,发生了变化,都会按照这个过渡的动画进行转变,而不是生硬的直接转变,这样就为动画提供了很好的方式。一般我们写:
-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;
-moz-transition:all 0.85s ease-in 0.1s;
transition:all 0.85s ease-in 0.1s;
all代表这所有属性的变化都会按照这个过渡进行变化
animation写法:
-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;
简写形式,animation后面多了动画次数和是否轮流反向播放

animation开头的为动画名称,所以这里我们要先定义动画如何变换:

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

因为浏览器兼容性,这里定义动画时也要写到。
from代表0%的时候,to 代表100%的时候。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

HTML / CSS 相关文章推荐
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 #HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 #HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 #HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 #HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php读取msn上的用户信息类
2008/12/05 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
web css实现整站样式互相切换
2013/10/29 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python装饰器decorator介绍
2014/11/21 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python温度转换实例分析
2018/01/17 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
银行存款证明样本
2014/01/17 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
环境卫生倡议书
2014/08/29 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
担保书格式范文
2015/09/22 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫