CSS3动画效果之transition

浏览数：31 / 时间：2015年06月09日

　　CSS3中有两种方式实现动画，transition和animation+@keyframe。

　　两者的作用机制不一样：transition定义在可能要进行动画的元素上，对某些CSS属性进行监听，一旦CSS改变则进行动画；animation定义在马上要进行动画的元素上，一旦定义动画即进行。

　　比如当鼠标悬浮的时候，某元素由红色改为绿色。使用transition和animation实现的共同代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: red;
            /*不同的代码*/
        }
        div:hover {
            /*不同的代码*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　使用transition的代码量更少，简介直观。

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition: background-color 2s;
}
div:hover {
    background-color: green;
}

　　其中transition可作为监听器，监听background-color的改变，一旦改变则之前的值作为初始状态，后来的值作为终止状态，进行整个过渡动画。

　　使用animation先要定义各种时间段的状态，这里只需要定义开始时间和结束时间，这个定义放在@keyframes中，anmation再调用这个keyframes。

div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards;
}
div:hover {
    -webkit-animation: test2 2s forwards;
}
@-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
}
@-webkit-keyframes test2 {
    from {background-color: red;}
    to {background-color: green;}
}

　　这里定义了两套动画和关键帧，一套应用于普通状态，一套应用于鼠标悬浮状态。而且开始状态的CSS和元素之前的CSS没关系，需要重新定义。更需要注意的是，animation的表现和transition有一点不同，在页面加载后会先执行普通状态下的动画一次。乍看一下，似乎animation完全不如transition好用，对于这个简单的需求确实如此，但animation可以应付一些更复杂的需求。

　　以下先从简单的开始，也就是transition。

　　transition的意思不是动画，而是过渡，从一个状态过渡到另一个状态。这意味着这个动画的执行包含三个要素，初始状态、过渡、终止状态。简单的结构意味着简单的实现和受限制的功能。transiton只包含四个属性：

transition-property: 要监听的CSS属性，如果有多个属性，用逗号分隔，且不能用transition简写。
transition-duration: 动画执行的时间。
transition-timing-function: 动画执行的方式。linear（匀速） / ease（先慢中快后慢，默认值） / ease-in（先慢后快） / ease-out（先快后慢） / ease-in-out（先慢中快后慢） / cubic-bezier(n, n, n, n) （贝塞尔曲线）
transition-delay: 动画延迟执行的时间。

　　首先用transition-property监听多个属性，代码如下：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 2s;
}
div:hover {
    background: green;
    width: 500px;
}

　　如果想移出鼠标不要立即执行动画，而是等0.5秒，则代码如下：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 2s;
    transition-delay: .5s;
}
div:hover {
    background: green;
    width: 500px;
    transition-delay: 0;
}

　　transition-delay需要定义在普通状态下的CSS中，因为移开鼠标后div立即恢复到普通状态，读取的是普通状态下的CSS属性。另外普通状态下的CSS属性会应用到hover状态下，导致鼠标悬浮的动画也延迟了0.5s，所以要在hover状态下将此属性定义为0。

　　可以看出，悬浮鼠标和移出鼠标都会执行动画是因为定义在div中的transition-property和transition-duration同样作用在了div:hover中，所以可以定义transition: none移除某一阶段的动画。比如：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: none;
}
div:hover {
    background: green;
    width: 500px;
    transition-property: background-color, width;
    transition-duration: 2s;
}

　　上面移除了移出鼠标后的动画效果。

　　可见，定义在元素上的transition是可以作用于其伪类的，并在伪类状态下再度运行动画，那么animation是不是一样呢，比如：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards;
}
@-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
}