让按钮来个酷动态！ 操纵DOM事件：CSS 篇 (二)

在:hover、:active的CSS设定中，当然也可以加上animation，当事件触发时开始播放定义好的@keyframes。

除了animation，还有可以非常简单让CSS属性转换时，能具有「转换」的时间过程，让这样的变化更加顺畅不再生硬。

那就是 transition(转场) 属性啦!

像是透过JavaScript或是上一篇提到的:hover等伪元素，当网页元件发生CSS的项目变化时，如果没有特别在transition做指定，他的变化就是立刻转换，而利用transition即可控制CSS属性转换的时间，以及速率变化(如同animation所做的时间与速度控制)。

与animation相同，transition也具有数个子属性：

• transition-property: 定义哪些 CSS 属性会被 transition 效果影响，多个属性可用逗号隔开，或使用all则可套用在所有属性上面。
• transition-duration: 定义 transition 所花费的时间；以时间作为单位，常用秒s或毫秒ms。
• transition-timing-function: 定义变化的速率；预设值为linear(平均速率变化)，另外可以使用step、cubic-bezier和定义好的ease/ease-in/ease-out/ease-in-out。
• transition-delay: 定义多久之後开始执行，可以产生延迟效果；以时间作为单位，常用秒s或毫秒ms。

.my-div {
    color: white;
    background:#333;
    transition-property:all;
    transition-duration:3s;
    transition-timing-function:ease;
}
.my-div:hover {
    color: #333;
    background:white;
}

除了使用子属性外，也可全部写在 transition 中：

transition: property duration timing-function delay;

备注：property 和 duration 为必要值。