css3動畫 - CSS3 transition動畫屬性指定前后問題
問題描述
img{ opacity: 0.5; transition: 0.35s all;}img:hover{ opacity: 1; margin-left: -50px;}<img src='http://m.4tl426be.cn/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://m.4tl426be.cn/wenda/img/1.jpg'>
問題解答
回答1:第一種 img 一直 有 transition 屬性, mouseover transtion 變化, mouseout transition 回復第二種, 只有mouseover 才有 transition 屬性, 所以 mouseover transition 變化, mouseout 沒有 transition屬性, 直接就變到結果了
回答2:其實就是樣式選擇器能否匹配的問題:img標簽無論鼠標是否懸停在其上都能匹配img{}選擇器,只有鼠標移入img時才能匹配img:hover{}選擇器;
當元素擁有transition:all;屬性并且其他屬性發生變化
才會有緩動效果。第一種情況transition:all;在img{}選擇器下,無論當鼠標移入移出img都能匹配transition:all;第一個條件滿足;另外移入移出時margin變化了,第二個條件滿足,所以移入移出都會緩動。
第二種情況移入移出都滿足margin變化,但是只有鼠標移入img能匹配到transition:all;,所以,第二種情況只有鼠標移入時才會發生緩動。
相關文章:
1. mysql 查詢身份證號字段值有效的數據2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. 視頻文件不能播放,怎么辦?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口,操作之后關閉,主窗口會得到相應的響應,例如網站的某些登錄界面,django后臺的管理等,這是怎么實現的呢?9. javascript - ios返回不執行js怎么解決?10. android - 分享到微信,如何快速轉換成字節數組
