關於css3 transition的問題：transition該放在哪？

css的transition容許css的屬性值在指定時間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並平滑地以動畫效果逐漸改變CSS的屬性值。

通常咱們使用hover來改變css值

在書寫的時候，可能初學者會產生疑惑，不清楚transition是寫在普通狀態的元素上，仍是寫在元素的hover狀態上，爲了清晰直觀描述，這裏舉個栗子，只寫關鍵部分

html：

<div class="demo1">transition放在normal狀態</div>
<div class="demo2">transition放在hover狀態</div>

css：

div{width:100px;height:100px;background:#333;color:#fff;margin:20px}
.demo1{
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}
.demo1:hover{
    background:#ccc;
    color:#333;
    width:200px;
}
.demo2{
    
}
.demo2:hover{
    background:#ccc;
    color:#333;
    width:200px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}

經過demo能夠看到，實際上過渡狀態分爲兩部分，順向和逆向，即mouseenter和mouseleave產生的動效；當transition放到元素的hover狀態時，只會產生順向的過分動畫