响应式Web设计:HTML5和CSS3实战(第2版)

第八章 CSS3过渡、变形和动画

• 过渡——transition
• 变形——transform
• 动画——animation

8.1什么是CSS3过渡以及如何使用它

• 当元素的CSS状态改变时，过渡是最简单的创造视觉效果的方式。
  • 如：我们在给超链接设置样式的时候，一般都会设置一个悬停状态的效果
  • transition: box-shadow 1s;
  • 在box-shadow上，将会耗时1秒，从现存状态切换到悬停状态。

8.1.1 过渡的简写语法

• 倾向使用缩写版，
  • 这样我只要定义过渡的时长和需要过渡的属性即可。
• transition: all 1s ease 0s;
  • 第一个和时间相关的值会被应用给transition-duration
  • 第二个则会被应用到transition-delay上

8.1.2 在不同时间段内过渡不同属性

• 多个属性过渡时，这些属性不必步调一致

  .style { 
      /* ...（其他样式）... */ 
      transition-property: border, color, text-shadow; 
      transition-duration: 2s, 3s, 8s; 
      }

8.1.3 过渡调速函数

• 贝塞尔曲线，本质上是缓动函数
• ease（默认）、linear、ease-in、ease-out、ease-in-out和cubic-bezier

8.2 CSS的2D变形

• 过渡是从一种状态平滑转换到另一种状态
• 变形则定义了元素将会变成什么样子
• 想象一下《变形金刚》里的擎天柱，他通过变形来变成一部卡车。而在机器人与卡车之间的阶段，我们称之为过渡（从一个状态过渡到另一个状态）。
• 变形是在文档流外发生的
  • 一个变形的元素不会影响它附近未变形的元素的位置。

8.2.1 scale

• 因为变形在文档流之外，所以如下设置的样式变形，并不会导致同类位置的变动

  .scale:hover { 
      transform: scale(1.4); 
  }

8.2.2 translate

• translate会告知浏览器按照一定的度量值移动元素，可以使用像素或者百分比
  • 第一个值是X轴上偏移的距离
  • 第二个是Y轴上偏移的距离
  • 正值会让元素向右或者向下移动，负值则会让元素向左或者向上移动。

  .translate:hover { 
      transform: translate(-20px, -20px); 
  } 

 + 如果你只传入一个值，它会被应用到X轴上。
 + 如果你想指定一个轴进行移动，可以使用translateX或者translateY。

• 解决绝对居中

  .inner { 
      position: absolute; 
      width: 200px; 
      background-color: #999; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
  }

8.2.3 rotate

• rotate允许你旋转一个元素
  • 括号中的值只能以度为单位（如90deg）。正值时会进行顺时针旋转，而负值则会逆时针旋转。

  .rotate:hover { 
      transform: rotate(30deg); 
  }

8.2.4 skew

• skew（斜切）会让元素在一个或者两个轴上变形偏斜。
  • 第一个值是X轴上的斜切（本例中是40度）
  • 第二个值是Y轴上的斜切（本例中是12度）
  • 忽略第二个值意味着仅有的值只会应用在X轴上（水平方向）。

  .skew:hover { 
      transform: skew(40deg, 12deg); 
  } 

8.2.5 matrix

• matrix（矩阵）变形的语法超级复杂

  .matrix:hover { 
      transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
  } 

• 傻瓜式的矩阵变形工具
  • http://www.useragentman.com/matrix/

8.2.6 transform-origin属性

• 在CSS里，默认的变形原点（浏览器中作为变形中心的点）是在正中心：
  • 元素X轴的50%和Y轴的50%处
  • 这和SVG默认的左上角（或者0 0）是不同的。
• 使用transform-origin，我们可以修改变形原点

  .matrix:hover { 
      transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 
      transform-origin: 270px 20px; 
  } 

8.3 CSS3的3D变形

• 使用perspective属性来设置用户视点到3D场景的距离。
• 结构:

  <div class="flipper">
    <span class="flipper-object flipper-vertical"> 
          <span class="panel front">The Front</span>
      <span class="panel back">The Back</span>
    </span>
  </div> 

• 样式：

  .flipper { 
      perspective: 400px; 
      position: relative; 
  } 
  /* 我们将父元素设置为相对定位，从而创造一个上下文来放置flipper-object。 */
  .flipper-object { 
      position: absolute; 
      transition: transform 1s; 
      transform-style: preserve-3d; 
  } 

• 使用backface-visibility属性把它设置为hidden来隐藏元素的背面

8.4 CSS3动画效果

• 相较于3D变形，CSS3动画的支持度更高。
• 将在元素翻转后为其添加脉冲动画效果。
  • 这里只定义了一个简单的关键帧选择器：100%。
    • 也可以设置多个关键帧选择器（推荐你使用百分比）。你可以把它们想象成时间轴上的点。

  @keyframes pulse { 
      100% { 
          text-shadow: 0 0 5px #bbb; 
          box-shadow: 0 0 3px 4px #bbb; 
      } 
  } 

• 最好使用一个能代表动画效果的名字，因为一个关键帧声明可以在项目中多处复用。
  • 使用：

  .flipper:hover .flipper-horizontal { 
      transform: rotateY(180deg); 
      animation: pulse 1s 1s infinite alternate both; 
  }

• animation-fill-mode属性
  • animation-fill-mode: forwards;
  • 这指使元素保留动画结束时的值。