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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
第五节 克隆 [5]
2006/10/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python 实现插入排序算法
2012/06/05 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python 可视化神器Plotly详解
2020/12/26 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
会计专业毕业生推荐信
2013/11/05 职场文书
主持人演讲稿范文
2013/12/28 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
cf搞笑广告词
2014/03/14 职场文书
2014年师德承诺书
2014/05/23 职场文书
博士生专家推荐信
2014/09/26 职场文书
西安兵马俑导游词
2015/02/02 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书