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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
CSS实现鼠标悬浮动画特效
May 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
用PHP读取RSS feed的代码
2008/08/01 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
JavaScript数组的5种迭代方法
2017/09/29 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python笔记(2)
2012/10/24 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
社区志愿者活动总结
2014/06/26 职场文书
离婚协议书的范本
2015/01/27 职场文书
环保证明
2015/06/23 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers