使用Keyframes制作纯CSS呼吸灯效果按钮

在开始今天的内容之前，首先来简单地了解一下 Keyframes，Keyframes 是 W3C 草案中 Animation 模块的一部分。在 Keyframes 中，每一组动画都可以赋予一个名称，通过它可以灵活地定义元素要执行的动画。遗憾的是，到目前为止，只有 WebKit 内核的浏览器支持这一特性，所以本文右上角那一排图标，只有 Chrome 和 Safari 被点亮。但这并不影响我们学习这一技术，局部差异化开发，一直都是 CSS3 和 HTML5 先行者坚持的立场。另外国内的搜狗浏览器在高速模式下，也是使用的 WebKit 内核，极不情愿使用 IE 但又不得不用 IE 的同学们可以试一试。

那么我们开始一步步地制作一个带呼吸灯效果的按钮。首先我们在页面中放置一个 a 标签，并为它定义好基本的样式：

        <a href="#" class="demo">Button</a>

a.demo {

    display:block;

    line-height: 30px;

    width: 80px;

    text-align: center;

    margin: 100px auto;

    background: #80CB1B;

    font-size: 16px;

    padding: 8px 19px 9px;

    -moz-box-shadow: 0 0 5px #343434;

    -webkit-box-shadow: 0 0 5px #fff;

    box-shadow: 0 0 5px #343434;

    color: #fff;

    font-weight: bold;

    padding: 5px 10px;

    text-decoration: none;

    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);

}

为了顺利完成最终效果，接下来我们需要了解一下如何通过 Keyframes 定义一组动画，Keyframes 的定义实际上是非常简单的，下面是 W3C 提供的实例代码：

/** 在实际应用中，应该使用 WebKit 私有属性 @-webkit-keyframes 作为属性名 **/

@keyframes 'wobble' {

    0% {

      left: 100px;

    }

    40% {

      left: 150px;

    }

    60% {

      left: 75px;

    }

    100% {

      left: 100px;

    }

}

上面的代码中，定义了一个名为 wobble 的动画，它将在动画开始的时候(0%)，将元素的位置的定位到 100px，然后过渡到 150px，75px，最后在结束动画的时候(100%)回到起始位置。这实际上是一个让元素水平摆动的动画，它看上去非常的简单。代码中的 0% 和 100% 可以分别使用 from 和 to 来代替，表示动画起始和终止时的状态，其他时候的状态则使用百分比来定义，对 Flash 有一些了解的同学，可以把它理解为 Flash 中的关键帧。接下来是我们的呼吸灯按钮的keyframes 定义，这组动画被命名为 breathingLight ，并且在动画起始、结束、和中间位置插入“关键帧”，重设元素的背景色和阴影：

@-webkit-keyframes 'breathingLight' {

        from {

                background-color: #80CB1B;

                -webkit-box-shadow:0 0 5px #ccc;

        }

	50% {

                background-color: #B7F20F;

                -webkit-box-shadow: 0 0 10px #398B08;

        }

	to {

                background-color: #80CB1B;

                -webkit-box-shadow:0 0 5px #ccc;

        }

}

keyframes 定义好了以后，需要告诉浏览器怎么去调用刚才定义好的名为 breathingLight 的动画。很显然，我们应该在最初添加到页面中的 a 元素进行设定：

a.demo {

	-webkit-animation-name: breathingLight;

	-webkit-animation-duration: 3s;

	-webkit-animation-iteration-count: infinite;

}

事实上，到此为止，我们应该已经能够看到下面的效果了，一呼一吸，一亮一暗，比起以前单调死板的按钮，显然更能让人眼前一亮：

Button

然而，我们仍然需要对上面的代码进行理解，以便以后能够灵活地运用。在这个应用中，为了执行动画，按钮被添加了 3 个属性，第一个属性 -webkit-animation-name，是为元素指定要执行的动画名，也就是刚才我们定义的 keyframes 。 第二个属性 -webkit-animation-duration 很好理解，它声明了一次动画执行的时间，这里设定为了3秒。第三个属性 -webkit-animation-iteration-count 定义了元素执行动画的次数，默认值是1次，也可以指定次数，这里的 infinite 顾名思义就是无限地循环执行。事实上定义动画的属性不只是局限于这 3 个，完整的属性和它们的用途在下面的表格中，在实际代码编写时，记得为这些属性名加上 -webkit 的私有前缀。

属性	可用值	描述
animation-name	name	动画名
animation-duration	time	动画执行的时间
animation-timing-function	ease、linear 等	动画函数
animation-iteration-count	infinite、number	重复次数
animation-direction	normal | alternate	反转动画方向
animation-delay	time	延时

参考资料:

• W3C --- Animations
• Safari Reference Library --- Animations