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

问题描述

问 题

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 属性， 所以 mouseover transition 变化， mouseout 没有 transition属性， 直接就变到结果了

这篇关于css3动画 - CSS3 transition动画属性指定前后问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！