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

webtimes
  • 251
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">
回复
阅读 3.2k
2 个回答
✓ 已被采纳

第一种 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;,所以,第二种情况只有鼠标移入时才会发生缓动。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏