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():指定3D位移在Z轴的位移量。
  • scale3d():用来缩放一个元素。
  • scaleZ():指定Z轴的缩放向量。
  • rotate3d():指定元素具有一个三维旋转的角度。
  • rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
  • perspective():指定一个透视投影矩阵。
  • matrix3d():定义矩阵变形。