响应式Web设计：使用HTML5和CSS3实践 （12）

look_w

第7章 CSS3过渡、变形和动画
7.1 什么是CSS3过渡以及如何使用它

    一个超链接默认设置了一个样式，当鼠标hover上去的时候可能会应用到另外一个样式，这就是一个过渡。过渡可以针对属性来过渡，比如当hover发生时候过渡。

    过渡涉及四个属性：
        transition-property 要过渡的属性名称，比如background-color或all
        transition-duration 定义过渡效果持续的时间
        transition-timing-function 定义过渡期间速度如何变化
        transition-delay 可选，定义过渡开始前的延迟事件

    单独使用各种过渡属性创建效果的语法如下：

        #content a {
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
         

    简写语法如下

    transition: all 1s ease 0s;

    也可以在不同的时间段内过渡不同的属性

        #content a {
            /* other setting */
            transition-property: border, color, text-shadow;
            transition-duration: 2s, 3s, 8s;
        }

    过渡调速函数，不太理解可以参考这里

7.2 CSS3中的2D变形

    有两种可用的CSS3变形：2D变形和3D变形。其中2D变形实现更广泛，它允许我们使用如下变形：
        scale：用来缩放大小
        translate：在屏幕内移动元素
        rotate：按照一定的角度旋转元素
        skew：按照X和Y轴对元素进行斜切
        matrix：将上述若干变形效果组合成单个声明，并允许你用像素精度来控制变形效果
    实际项目中可以使用傻瓜矩阵变形工具来完成这样的事情。
    transform-origin可以用来修改变形效果的起点。

7.3 尝试CSS3的3D形变

    CSS3的3D形变能创造非常酷的效果，但相对2D的浏览器支持性要差一些。

7.4 CSS3动画效果

如下是一个给h5加上阴影动画的例子，最开始定义一个关键帧的名字，以及在动画进行到多少的时候的效果，然后在元素h5应用。当然如果想要在特定浏览器上执行，得要给 @keyframes 和 animation 都加上私有前缀。

    @keyframes warning {
      from {
        text-shadow: 0px 0px 4px #000000;
      }
      50% {
        text-shadow: 0 0 40px #000000;
      }
      to {
        text-shadow: 0 0 4px #000000;
      }
    }
     
     
    .back h5 {
        font-size: 4em;
        color: #f2050b;
        text-align: center;
        animation: warning 1.5s infinite ease-in;
    }

动画可以采用的参数有七个可以独立设置的属性值，除了像下面这样列出来你也可以像上例那样写缩写。

    animation-name: warning;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: 0s;
    animation-fill-mode: none;

CSS3过渡让效果的初始按照可定义的速度进行，形变使使得元素大小、偏移等值脱离初始，动画则定义了一个变化的过程，三者结合起来能产生非常丰富的效果。 该书示例有结合示例进行演示，在此跳过，有兴趣可以自己参考~
7.5 本章小结

本章学习了CSS3过渡、形变和动画的内容，学习这些新特性的最终目的是使用CSS3来替代JavaScript制作一些优雅降级的增强效果，从而使代码更简洁和丰富。下一章将开始学习表单中HTML5和CSS3的应用。