css3动画 - CSS3 transition动画属性指定前后问题

问题描述

img{ opacity: 0.5; transition: 0.35s all;}img:hover{ opacity: 1; margin-left: -50px;}<img src='https://www.haobala.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='https://www.haobala.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;，所以，第二种情况只有鼠标移入时才会发生缓动。