对transition,transform,animation的疑惑
2016-06-14 00:00
357 查看
摘要: transition,transform,animation,translate这几个CSS3的关键词,经常让人迷茫,而且他们的参数还很多.我也经常忘记了具体每个参数的意义,在这里重温一下
我们先来看一下百度翻译
最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说).
恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚.
我来举个例子,说明一下这些变的区别.
animation就像动画片的制作一样,你需要先把每一页(@keyframes)提前画出来,然后他们先后展示,就组成了动画.注重的是场景的变化,你可以让页面中元素的多个属性进行变化,想改变什么,就改变什么.
transform倾向于变换,比如自己变大变小,扭曲,旋转等,它指定了几种常见的.简单的动画.你拿过来就可以用,不用再自己绘制每个场景了,但是同样的,改变是有限的,你只能按照它给的那几个属性来操作.
translate是transform中常见的.简单的动画中的一种,就是简单的改变元素的宽高
transition是过渡,倾向于描述变化过程,是的以上所有的变化都是需要一个时间来完成的.那么这段时间是多长?变化是匀速还是先快后慢?是立即执行还是等会再说.
这里的 变化过程不是仅指这里的transform,而是任何的CSS变化,比如一个蓝色的div本来是隐藏的,你通过JS让其 "display:block"了,那么当前显示出来的时候,就要受到这个transition的控制.animation是自行设置的
同时也说明,如果你要使用transform改变元素的某些属性(比如transform改变宽高)的时候,你也需要设置transition来控制这些动画的过程,最起码你的设置个"动画持续时间"和"all",不然动画是不会执行的.
点击这里试试
接下来是参数
transition:该是一个简写属性.
transition-property :一般写all. 都有哪些属性的变化由我控制?
transition-duration : 动画持续的时间,必须写单位(比如:2s)
transition-timing-function : 动画是平滑进行,还是先快后满等?linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay : 延迟多少时间才开始动画
animation : 这也是一个简写属性
animation-name: 祯动画的名字
animation-duration: 动画持续的时间
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n)
animation-delay: 延迟多长时间才开始动画
animation-iteration-count: 动画应该播放的次数 n(具体数字)|infinite(反复播放)
animation-direction:是否应该轮流反向播放动画 normal(默认正常播放)|alternate(轮流反向播放);
名词解释
好吧,如果仅仅是按照百度字典的解释,我根本分辨不出,变换,变化,转换/化的意义
我们先来看一下百度翻译
transition: 过渡,转变,变迁; [语] 转换; [乐] 变调; transform: 变换; 改变; 改观; translate: 翻译; 转化; 解释; animation: 生气,活泼; 动画片制作,动画片摄制;动画片
最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说).
恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚.
我来举个例子,说明一下这些变的区别.
animation就像动画片的制作一样,你需要先把每一页(@keyframes)提前画出来,然后他们先后展示,就组成了动画.注重的是场景的变化,你可以让页面中元素的多个属性进行变化,想改变什么,就改变什么.
transform倾向于变换,比如自己变大变小,扭曲,旋转等,它指定了几种常见的.简单的动画.你拿过来就可以用,不用再自己绘制每个场景了,但是同样的,改变是有限的,你只能按照它给的那几个属性来操作.
translate是transform中常见的.简单的动画中的一种,就是简单的改变元素的宽高
transition是过渡,倾向于描述变化过程,是的以上所有的变化都是需要一个时间来完成的.那么这段时间是多长?变化是匀速还是先快后慢?是立即执行还是等会再说.
注意
transform经常与transition一起使用,对于animation需要自己设置,且transition对animation不起作用这里的 变化过程不是仅指这里的transform,而是任何的CSS变化,比如一个蓝色的div本来是隐藏的,你通过JS让其 "display:block"了,那么当前显示出来的时候,就要受到这个transition的控制.animation是自行设置的
同时也说明,如果你要使用transform改变元素的某些属性(比如transform改变宽高)的时候,你也需要设置transition来控制这些动画的过程,最起码你的设置个"动画持续时间"和"all",不然动画是不会执行的.
点击这里试试
transition: -> 我就看你怎么变 -> transform: -> 我就变这几个属性 -> translate: -> 拉长拉高 -> animation: -> 动画片 ->
接下来是参数
transition:该是一个简写属性.
transition-property :一般写all. 都有哪些属性的变化由我控制?
transition-duration : 动画持续的时间,必须写单位(比如:2s)
transition-timing-function : 动画是平滑进行,还是先快后满等?linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay : 延迟多少时间才开始动画
transition:all 2s ease-in-out .5s
animation : 这也是一个简写属性
animation-name: 祯动画的名字
animation-duration: 动画持续的时间
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n)
animation-delay: 延迟多长时间才开始动画
animation-iteration-count: 动画应该播放的次数 n(具体数字)|infinite(反复播放)
animation-direction:是否应该轮流反向播放动画 normal(默认正常播放)|alternate(轮流反向播放);
相关文章推荐
- Linux命令scp
- Java JUC之Atomic系列12大类实例讲解和原理分解
- 简述synchronized和java.util.concurrent.locks.Lock的异同
- ThreadLocal实现方式&使用介绍
- iphone5s如何省电?耗电费电如何处理?iphone5s耗电费电解决方法
- 双城记
- bootstrap 表格插件bootstrap-table的使用
- 集合(四): Map
- 使用xib crash的坑点
- xcode值xib异常
- 升级开发者版本的Xcode,iOS,macOS...
- 自定义NavgationBar
- android 实现EditText输入,同步在TextView显示
- 创业的的第二百零六天
- MySQL 事务没有提交导致 锁等待 Lock wait timeout exceeded
- JavaScript 函数 encodeURI(), encodeURIComponent()的使用
- innodb关键特性和体系架构整理
- MySQL(DW)
- Oracle 常用命令
- 修改一个web项目名称注意事项