css3 动画笔记

作者:blue(又名一书and一世界) 我的github
**用途: **当作字典来查

some websites to learn css3Animate

• css3动画文档 by W3CSchool
• css3动画简介 by阮一峰
• css3动画手册 by 腾讯 isux
• css3动画之硬件加速 by w3cplus
• 调试css3 动画 keyframe by w3ctech
• css动画的性能优化 by zencode.in
• 浏览器是如何渲染页面的 by code.leozhang2018.me (读完了之后会更加懂得如何提升css动画性能)
• 前端开发体系建设日记 by 张云龙 （这个链接是作为拓展的）

transition

• grammar: tansition: property duration timing-function delay;
• detail
  • transition-property：要过渡的css属性
  • transition-duration：要过渡持续多少秒或者毫秒
  • transition-timing-function：速度效果的速度曲线
  • transition-delay：延迟多少秒执行过渡
• notice
  • 默认值：transition:all 0 ease 0
  • 如果transition-duration属性没有被设置，则默认为0，即不会产生过渡效果
  • tanstion-timing-function: linear/匀速/ | ease-in /加速/ | ease-out /减速/ | ease /逐渐放慢/ | cubic-bezier /函数，自定义速度模式，可以使用 工具网站 这个网站制作/
• compatibility
  • 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
  • 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
  • transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
• advantage : 简单易用
• disavantage
  • transition需要事件触发，所以没法在网页加载时自动发生。
  • transition是一次性的，不能重复发生，除非一再触发。
  • transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  • 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

animation

• grammar: name duration timing-function delay iteration-count direction
• detail
  • @keyframes：规定动画
  • animation-name：绑定选择器的keyframe名称
  • animation-duration：动画的持续时间，以秒或者毫秒计
  • animation-timing-function：动画的速度曲线
  • animation-delay：延迟多少秒执行动画
  • animation-iteration-count：动画播放次数
  • animation-diretion：是否应该轮流反向播放动画
  • animation-play-state(通常用在js控制是否播放,object.style.animationPlayState)：（paused[停止] | running[播放]）规定动画正在播放还是暂停
  • animation-fill-mode(通常用在js控制动画效果是否可见,object.style.animationFillMode)：（none[不改变默认行为] | forwards[当动画完成后，保持最后一个属性值] | backwards[在animation-delay 所制定的一段时间内，在动画显示之前，应该开始属性值] | both[向前和向后填充模式都被应用]）规定动画在播放之前或之后，其动画效果是否可见。
• compatibility
  • Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-
  • Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性
• notice
  • 默认值：animation:none 0 ease 0 1 normal
  • 尽量少在@keyframe里使用除了transform,opacity,filter以外的元素，因为会触发浏览器的重绘(repaint)详情
  • @keyframe
    • 定义：以百分比来规定改变发生的时间，或者通过关键词"from" 和 "to"，等价于0%和100%，0%是动画的开始时间，100%是结束时间
    • grammar:@keyframes animationname{ keyframes-selector { css-styles;} }
    • detail
      • animationname：（必需）定义动画名称
      • keyframes-selector：（必需）动画时长的百分比，合法的值：0%-100%（可以使用 from[0%] 和 to[100%]）
      • css-styles：（必需）一个或多个合法的css样式属性
    • example

---

          @keyframes mymove
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }
          @-moz-keyframes mymove /* Firefox */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }

          @-webkit-keyframes mymove /* Safari 和 Chrome */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }

          @-o-keyframes mymove /* Opera */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }

---

• 如果animation-duration属性没有设置，则时长为0，即动画不会被播放
• animation-iteration-count默认值为1，可设置为infinite（无限次播放）
• animation-direction:normal /正常播放/ | alternate /轮流反向播放/
• advantage ：解决了transition过渡效果不能循环播放的弊端
• disvantage：目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。代码必须写成下面这样。

---

      div:hover {
        -webkit-animation: 1s rainbow;
        animation: 1s rainbow;  
      }

      @-webkit-keyframes rainbow {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
      }

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

---

transform

• grammar:transform:none | transform-functions
• detail:none and transform-functions
  • none：不定义转换
  • matrix(n,n,n,n,n,n)：定义2D转换，使用六个值的矩阵
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义3D转换，使用16个值的4X4矩阵
  • translate(x,y)：定义2D转换（参数：x轴移动量，y轴移动量。+即向右移动，-即向左移动。单独一个量时表示x轴移动量与y轴移动量相等）
  • translate3d(x,y,z)：定义3D转换（参数基于translate(x,y)扩展）
  • translateX(x)：定义转换，只用于X轴的值
  • translateY(y)：定义转换，只用于Y轴的值
  • translateZ(z)：定义转换，只用于Z轴的值
  • scale(x,y)：定义2D缩放转换（参数x,y是倍数）
  • scale(x,y,z)：定义3D缩放转换（参数基于scale(x,y)扩展）
  • scaleX(x)：设置X轴的值来定义缩放转换
  • scaleY(y)：设置Y轴的值来定义缩放转换
  • scaleZ(z)：设置Z轴的值来定义缩放转换
  • rotate(angle)：定义2D旋转。在参数中规定角度（正是顺时针，负是逆时针）
  • rotate3d(x,y,z,angle)：定义3D旋转
  • rotateX(angle)：定义沿着X轴的3D旋转
  • rotateY(angle)：定义沿着Y轴的3D旋转
  • rotateZ(angle)：定义沿着Z轴的3D旋转
  • skew(x-angle,y-angle)：定义沿着X和Y轴的2D倾斜转换
  • skew(angle)：定义沿着X轴的2D倾斜转换
  • skew(angle)：定义沿着Y轴的2D倾斜转换
  • perspective(n)：为3D转换元素定义透视视图
• compatibility
  • Internet Explorer 10、Firefox、Opera 支持 transform 属性
  • Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）
  • Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）
  • Opera 只支持 2D 转换
  • Internet Explorer 10 和 Firefox 支持 3D 转换
  • Chrome 和 Safari 需要前缀 -webkit-
  • Opera 仍然不支持 3D 转换（它只支持 2D 转换）
• notice
  • transform-origin可以定义改变被转换元素的位置
    • grammar：transform-origin:x-axis,y-axis,z-zxis
    • 默认值：transform-origin:50% 50% 0
    • detail
      • x-axis | y-axis：定义视图被置于X轴的何处。可能的值：left | center | right | length | %
      • z-axis：定义视图被置于Z轴的何处。可能的值：length
    • compatibility
      • Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性
      • Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）
      • Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）
      • Opera 只支持 2D 转换
  • transform-style规定如何在3D空间中呈现被嵌套的元素
    • grammar:transform-style:flat | preserve-3d
    • tranform-style默认值：transform-style:flat
    • compatibility
      • Firefox 支持 transform-style 属性
      • Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性
  • perspective定义3D元素距视图的距离，以像素计。
    • grammar:perspective number | none
    • perspective默认值：perspective:none
    • detail
      • 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
      • perspective 属性只影响 3D 转换元素
      • 通常和perspective-origin属性配合改变3D元素的底部位置
    • compatibility
      • 目前浏览器都不支持 perspective 属性
      • Chrome 和 Safari 支持替代的 -webkit-perspective 属性
  • perspective-origin定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置
    • grammar:perspective-origin:x-axis,y-axis
    • perspective-origin默认值：perspective-origin:50% 50%
    • detail
      • 当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身
      • 该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素
    • compatibility
      • 目前浏览器都不支持 perspective-origin 属性
      • Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性
  • backface-visibility定义当元素不面向屏幕时是否可见
    • grammar:backface-visibility: visible | hidden
    • backface-visibility默认值：backface-visibility:visible
    • detail
      • 如果在旋转元素不希望看到其背面时，该属性很有用
    • compatility
      • 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性
      • Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性

下一篇文章预告： chrome dev tools 简介