CSS3中动画属性transform、transition和animation属性的区别


Posted in HTML / CSS onSeptember 25, 2016

Transform
在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。

关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的(有待研究)。其他的属性则根据这个属性来计算进行计算。

关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说,应该只需要preserve-3d就好了,但是从谣传“开启了perserve-3d就使用了GPU加速”来说,这个属性可能是为了降低系统消耗用的,毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有以下五个:

     1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;
     2、rotate(deg)是用来控制元素旋转角度的;
     3、skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;
     4、scale3d(x,y,z) 用来放大缩小效果,属性是比值;
     5、matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。

总体看来 css transform的属性和原来使用的left ,right ,top, bottom 的属性从动静角度来说没有任何区别,因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

Transition
transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。比如你有如下两个样式:

复制代码
代码如下:

.position{
left:100px;
top:100px;
}
.animate{
-webkit-transition:left 0.5s ease-out;
left:500px;
top:500px;
}

其中animate的transition的属性的意思说:当你的left属性发生变化的时候,执行动画效果(仅仅基于left的属性变化,其他的属性不会加入到动画变化里面去);

首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候,元素的属性变化,触发webkit-transition,以指定属性变化前的值为起始值,变化后的属性为结束值,执行动画效果。这是一个简单的两点变化过程,大大简化了animation属性的复杂程度。

同时,如果在transition的动画当中,属性值有了新的变化,则会中断当前的动画执行,并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

我在css编写的时候,因为变化的属性只有transform一个,因此在transtion属性里面指定响应属性为all,可以响应并执行元素所有属性的变化动画(能做动画的属性)。

Animation
在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西:keyframes。

做过Flash动画的人都会知道,Flash里面有两个基础武器:时间轴和关键帧。而css keyframes的出现,则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例:

复制代码
代码如下:

@keyframes 'wobble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.animate{
left:100px;
-webkit-animation:wobble 0.5s ease-out;
-webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble',其中 0% 代表在变化中不同时间点的属性值,你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是,keyframes提供更多的控制,尤其是时间轴的控制,这点让css animation更加强大,使得flash的部分动画效果可以由css直接控制完成,而这一切,仅仅只需要几行代码,也因此诞生了大量(比起flash来说算是大量了)基于css的animation tools,用来取代flash的动画部分。关于动画工具,可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是:animation-fill-mode,这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式,保证动画的整体连贯。

总结
以上就是这篇文章的全部内容了,希望能对大家的学习或者工作带来一定的帮助。

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 #HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 #HTML / CSS
纯DOM+CSS3实现简单的小风车动画
Sep 27 #HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 #HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 #HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 #HTML / CSS
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 #HTML / CSS
You might like
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python logging模块的使用总结
2019/07/09 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
社区中秋节活动方案
2014/01/29 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
60句有关成长的名言
2019/09/04 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers