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">
第一種img 一直有transition 屬性， mouseover transtion 變化， mouseout transition 回复
第二種， 只有mouseover 才有transition 屬性， 所以
其實就是樣式選擇器能否匹配的問題：
img標籤無論滑鼠是否懸停在其上都能匹配img{}選擇器，只有滑鼠移入img時才能匹配img:hover{}選擇器;
才會有緩動效果。第一種情況transition：all;在img{}選擇器下，無論當滑鼠移入移出img都能匹配transition：all;第一個條件滿足；另外移入移出時margin變化了，第二個條件滿足，所以移入移出都會緩動。
第二種情況移入移出都滿足margin變化，但是只有滑鼠移入img能匹配到transition：all;，所以，第二種情況只有滑鼠移入時才會發生緩動。