CSS学习笔记之CSS3新特性

这篇文章，我们将会介绍在 CSS3 中加入的过渡与动画效果

1、过渡

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素在样式转换时添加过渡效果

（1）属性名称

可以使用 transition-property 规定应用过渡效果的属性名称，当指定的属性改变时，过渡效果开始作用

可选值如下：

none：表示没有属性获得过渡效果，默认值
all：表示所有属性获得过渡效果
名称列表：指定获得过渡效果的属性，列表以逗号分隔

（2）作用时间

可以使用 transition-duration 规定过渡效果的作用时间，其接受一个时间值，默认为 0

因此在使用过渡效果时，必须要设置 transition-duration 属性，否则将无法看到过渡效果

（3）作用速度

可以使用 transition-timing-function 规定过渡效果的速度曲线，可选值如下：

linear：以相同的速度从开始至结束
ease：默认值，以慢速开始，然后变快，以慢速结束
ease-in：以慢速开始
ease-out：以慢速结束
ease-in-out：以慢速开始，以慢速结束

（4）延迟时间

可以使用 transition-delay 延迟过渡效果的开始时间，这个属性同样接受一个时间值，默认为 0

（5）简写属性

为了方便，可以仅在 transition 属性中设置所有有关过渡效果的属性

transition: property duration timing-function delay;

一个简单的例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
    }
    div:hover {
        width: 300px;
    }
    .withTransition {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
        transition: width 1s ease;
        -o-transition: width 1s ease;      /* Opera */
        -moz-transition: width 1s ease;    /* Firefox */
        -webkit-transition: width 1s ease; /* Safari and Chrome */
    }
    /* 当鼠标停留在 div 元素上时，宽度将会变化，从而产生过渡效果 */
    </style>
</head>
<body>
    <div></div>
    <br/>
    <div class="withTransition"></div>
</body>
</html>

2、动画

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，为网页创建动画

（1）动画名称

可以使用 animation-name 属性规定动画名称，它的可选值有两个：

none：无动画，一般用于覆盖来自级联的动画效果
名称：定义动画名称

（2）播放时间

可以使用 animation-duration 规定动画效果的作用时间，其接受一个时间值，默认为 0

因此在使用动画时，必须要设置 animation-duration属性，否则将无法看到动画效果

（3）播放速率

可以使用 animation-timing-function 规定动画效果的速度曲线，可选值如下：

linear：以相同的速度从开始至结束
ease：默认值，以慢速开始，然后变快，以慢速结束
ease-in：以慢速开始
ease-out：以慢速结束
ease-in-out：以慢速开始，以慢速结束

（4）延迟时间

可以使用 animation-delay 延迟动画效果的开始时间，这个属性同样接受一个时间值，默认为 0

（5）播放次数

可以使用 animation-iteration-count 属性规定动画的播放次数，可选值如下：

数字：表示播放次数，默认为 1
infinite：表示无限播放

（6）播放方向

可以使用 animation-direction 属性规定动画的播放方向，可选值如下：

normal：默认值，正常播放
alternate：轮流反向播放

（7）播放状态

可以使用 animation-play-state 属性规定动画的播放状态，可选值如下：

running：默认值，正在播放
paused：暂停

（8）间隙可见性

可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性，可选值如下：

none：不改变默认行为
forwards：在动画完成之后，保持最后的属性值（在最后一个关键帧中定义）
backwards：在动画显示之前，应用开始的属性值（在第一个关键帧中定义）
both：在动画显示之前应用开始的属性值，在动画完成之后保持最后的属性值

（9）简写属性

为了方便，可以仅在 animation 属性中设置所有有关动画的属性

animation: name duration timing-function delay iteration-count direction;

（10）@keyframes 规则

动画的原理其实就是将一套 CSS 样式逐渐变换成另一套 CSS 样式

我们可以通过 keyframes 规则，通过百分比定义关键帧的 CSS 样式，从而创建出一个连续播放的动画

另外除了使用百分比，也能使用关键字定义关键帧，关键字分别是 from（对应 0%）和 to（对应 100%）

一个简单的例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
        position: relative;
        animation: test 2s linear infinite alternate;
        -webkit-animation: test 2s linear infinite alternate; /*Safari and Chrome*/
    }
    @keyframes test {
        from { left: 0px; }
        to { left: 200px; }
    }
    @-webkit-keyframes test { /*Safari and Chrome*/
        from { left:0px; }
        to { left:200px; }
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

【阅读更多 CSS 系列文章，请看 CSS学习笔记】