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实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP实现八皇后算法
2019/05/06 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
python @property的用法及含义全面解析
2018/02/01 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
keras导入weights方式
2020/06/12 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
印度网上药店:1mg
2017/10/13 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014企业年终工作总结
2014/12/23 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
涨价通知怎么写
2015/04/23 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
JavaScript实现登录窗体
2021/06/22 Javascript
Python字典的基础操作
2021/11/01 Python