对transition,transform,animation的疑惑

名词解释

好吧,若是仅仅是按照百度字典的解释,我根本分辨不出,变换,变化,转换/化的意义

• 咱们先来看一下百度翻译

  transition: 过渡，转变，变迁; [语] 转换; [乐] 变调;
  transform: 变换; 改变; 改观;
  translate: 翻译; 转化; 解释;
  animation: 生气，活泼;  动画片制做，动画片摄制;动画片

• 最后一个animation能够理解,就是动画的意思,相似flash里面的祯动画(你没听过的话就当我没说).
• 恩恩,颤抖吧!!!英语渣的程序员们.其他三个果真是傻傻分不清楚.

• 我来举个例子,说明一下这些变的区别.
  1. animation就像动画片的制做同样,你须要先把每一页(@keyframes)提早画出来,而后他们前后展现,就组成了动画.注重的是场景的变化,你可让页面中元素的多个属性进行变化,想改变什么,就改变什么.
  2. transform倾向于变换,好比本身变大变小,扭曲,旋转等,它指定了几种常见的.简单的动画.你拿过来就能够用,不用再本身绘制每一个场景了,可是一样的,改变是有限的,你只能按照它给的那几个属性来操做.
  3. translate是transform中常见的.简单的动画中的一种,就是简单的改变元素的宽高
  4. 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(轮流反向播放);