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

Question

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">

Answer 1

The first type of img always has a transition attribute, mouseover transition changes, mouseout transition responds
The second type, only mouseover has a transition attribute, so mouseover transition changes, mouseout does not have a transition attribute, and it changes directly to the result

Answer 2

In fact, it is a question of whether the style selector can match:
The img tag can match the img{} selector regardless of whether the mouse is hovering over it. Only when the mouse is moved into img can it match the img:hover{} selector. ;

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

will have the easing effect. In the first case, transition: all; under the img{} selector, whether the mouse moves in or out, img can match transition: all; the first condition is met; in addition, the margin changes when the mouse is moved in and out, so the second condition is met. Moving in and out will slow down.

In the second case, the margin changes are satisfied when moving in and out, but only when the mouse moves into img, the transition: all; can be matched. Therefore, in the second case, easing will only occur when the mouse moves in.