CSS 过渡鼠标离开不能正常工作

Question

我正在尝试缩放和调低图像的不透明度，当我使用光标进入 img 时效果非常好，但当我离开 img 时过渡不起作用。

这是我的代码：

#hoverCon:hover img {
  transform: scale(1.2);
  opacity: 0.5;
  transition: all .28s ease-out;
}

Answer 1

你应该写

#hoverCon img {
  transform  : scale(1);   /* optional */
  opacity    : 1;          /* optional */
  transition : all .28s ease-out;
}

#hoverCon:hover img {
  transform  : scale(1.2);
  opacity    : 0.5;
}

定义基本属性（可选）并在正常状态下转换，然后仅在 hover

上更改属性

示例：http://codepen.io/anon/pen/JogVVW

CSS 过渡鼠标离开不能正常工作

CSS transition mouse leave doesn't work properly

css

transition