css3動畫 - CSS3 transition動畫屬性指定前后問題

問題描述

img{ opacity: 0.5; transition: 0.35s all;}img:hover{ opacity: 1; margin-left: -50px;}<img src='http://www.wxshucaidpc.com/wenda/img/1.jpg'>

如上簡單動畫代碼也知道transtion屬性各個參數以及日常用法，但我嘗試了下改變transition: 0.35s all;屬性的設置位置，比如第一種情況也就是如上代碼，呈現的效果是我想要的效果，就是鼠標移入離開都過渡很平緩，但我將transition: 0.35s all;從img{}標簽移到hover里如下：（則效果不是我想要的，鼠標移入后過渡平緩，可鼠標離開后幾乎沒有平緩過渡效果，我的問題是兩種位置設置呈現不同的效果的原因是什么，有什么講究呢，謝謝）

img{ opacity: 0.5; }img:hover{ opacity: 1; margin-left: -50px; transition: 0.35s all;}<img src='http://www.wxshucaidpc.com/wenda/img/1.jpg'>

問題解答

第一種 img 一直 有 transition 屬性， mouseover transtion 變化， mouseout transition 回復第二種， 只有mouseover 才有 transition 屬性， 所以 mouseover transition 變化， mouseout 沒有 transition屬性， 直接就變到結果了

其實就是樣式選擇器能否匹配的問題：img標簽無論鼠標是否懸停在其上都能匹配img{}選擇器，只有鼠標移入img時才能匹配img:hover{}選擇器；

當元素擁有transition：all;屬性并且其他屬性發生變化

才會有緩動效果。第一種情況transition：all;在img{}選擇器下，無論當鼠標移入移出img都能匹配transition：all;第一個條件滿足；另外移入移出時margin變化了，第二個條件滿足，所以移入移出都會緩動。

第二種情況移入移出都滿足margin變化，但是只有鼠標移入img能匹配到transition：all;，所以，第二種情況只有鼠標移入時才會發生緩動。