css3 动画笔记

2016-07-21 本文已影响435人一书and一世界

作者: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 属性

css3 动画笔记

some websites to learn css3Animate

transition

animation

transform

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

猜你喜欢

热点阅读