css3动画 - CSS3 transition动画属性指定前后问题
PHP中文网
PHP中文网 2017-04-17 11:32:42
0
2
758
img{
    opacity: 0.5;
    transition: 0.35s all;
}

img:hover{
    opacity: 1;
    margin-left: -50px;

}

<img src="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="img/1.jpg">
PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(2)
左手右手慢动作

第一種img 一直有transition 屬性, mouseover transtion 變化, mouseout transition 回复
第二種, 只有mouseover 才有transition 屬性, 所以

大家讲道理

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

当元素拥有transition:all;属性
并且其他属性发生变化

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板