css3动画

css3动画教程

CSS Transition (转换)

• transition的作用在于，指定状态变化所需要的时间。
  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function
• transition-timing-function 状态变化速度:
  1. ease 逐渐放慢
  2. linear 匀速
  3. ease-in 加速
  4. ease-out 减速
  5. cubic-bezier函数：自定义速度模式。工具网站为：http://cubic-bezier.com/
• transition 注意点：

1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
2. 不是所有的CSS属性都支持transition。
3. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

• transition的局限

  transition的优点在于简单易用，但是它有几个很大的局限。

  1. transition需要事件触发，所以没法在网页加载时自动发生。
  2. transition是一次性的，不能重复发生，除非一再触发。
  3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

  4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

     CSS Animation就是为了解决这些问题而提出的。

Animation(动画)

• CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

  1. animation-name 规定选择器的keyframe的名称。
     • keyframes关键字用来定义动画的各个状态，它的写法相当自由

       •   @keyframes rainbow {     0% { background: #c00 }     50% { background: orange }     100% { background: yellowgreen }   }

       • 0%可以用from代表，100%可以用to代表,因此上面的代码等同

           @keyframes rainbow {     from { background: #c00 }     50% { background: orange }     to { background: yellowgreen }   }

  2. animation-duration 规定动画完成时间 。
  3. animation-timing-function 动画曲线。
  4. animation-delay 动画之前的延迟时间。
  5. animation-iteration-count 播放的次数。
     • infinite：动画无限次的播放
     • 也可以使用数字：3,7,6等.
  6. animation-direction 是否轮流方向播放动画。
     • normal
     • alternate
     • reverse 方向播放。
     • alternate-reverse
     • 除啦normal 和 reverse 其他的属性浏览器支持并不好，所以慎用。
  7. animation-fill-mode 动画结束后状态：
     • none 默认值：回到动画没有开始的状态
     • backwards 让动画回到第一帧的状态
     • forwards 表示让动画停留在结束状态
     • both
  8. 需要注意的是:animation的一个状态到另一个是平滑的过渡,利用steps函数实现分布过渡。

• animation-play-state:动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态

  • paused 暂停
  • running 播放

• 浏览器前缀,IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀

  Transform(变形)函数有：rotate | scale | skew | translate |matrix;

  • rotate(30deg)顺时针或者逆时针旋转。
  • translate(x,y)也有translateX()和translateY()沿着x轴或者y轴移动。
  • scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。
    • scaleX(2)水平缩放
    • scaleY(1.5)垂直缩放
  • skew扭曲
    • skewX(30deg)
    • skewY(60deg)

改变元素基点transform-origin

• transform进行的rotate,translate,scale,skew等都是以自己元素中心位置变化的。
• transform-origin(X,Y)设置元素的中心。x可以为：left,center,right。y可以为：top,center,bottom

  3D transform常用的transform-function的功能:

• translate3d()：移元素元素，用来指定一个3D变形移动位移量
• translate()：指定3Ｄ位移在Ｚ轴的位移量。
• scale3d()：用来缩放一个元素。
• scaleZ():指定Z轴的缩放向量。
• rotate3d()：指定元素具有一个三维旋转的角度。
• rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
• perspective()：指定一个透视投影矩阵。
• matrix3d()：定义矩阵变形。