悬停结束时的 CSS3 动画

Question

我有一个 div，里面有一些图像。当我将鼠标移到其中一个图像上时，我希望它变大，当我将鼠标移出时，我希望它再次缩小。我知道 CSS 中没有 mouseout 或类似的东西，所以我将反向动画放入图像的正常样式中。现在我的问题是，当我加载网站时，所有图像都会进行缩小动画。

有没有办法只使用 CSS 或我必须使用 Javascript？

我的 HTML：

<div id="picmen">
    <img src="/images/b1.png" />
    <img src="/images/b2.png" />
    <img src="/images/b3.png" />
    <img src="/images/b4.png" />
    <img src="/images/b5.png" />
    <img src="/images/b6.png" />
    <img src="/images/b7.png" />
</div>

我的 CSS：

#picmen img {
    float: right;
    margin: 3px 1px 3px 1px;
    height: 50px;
    width: 50px;
    animation: shrink 0.5s;
}

@keyframes shrink {
    from{ width: 60px; height: 60px; }
    to{ width: 50px; height: 50px; }
}

#picmen img:hover {
    animation: grow 0.5s; 
    width: 60px;
    height: 60px;
}

@keyframes grow {
    from{ width: 50px; height: 50px; }
    to{ width: 60px; height: 60px; }
}

Answer 1

尝试使用：

transition-duration: 0.5s;

而不是创建@keyframe 动画。

您的代码如下所示：

#picmen img {
  float: right;
  margin: 3px 1px 3px 1px;
  height: 50px;
  width: 50px;
  transition-duration: 0.5s;
}

#picmen img:hover {
  transition-duration: 0.5s;
  width: 60px;
  height: 60px;
}

如果要添加缓动，可以使用：

transition-timing-function: ease-in-out;

有关transition css3 的更多信息，请访问w3schools website。

See it in action.

---

为什么有效：

当您定义和使用 @keyframe 动画时，您的代码将在每次看到动画时运行该动画。
浏览器会像这样读取您的代码：

#picmen img{  //define all images inside 'picmen' div
    ...    //all of the basics (float, margin)
    height:50px; //set height to 50px (iff no further instructions about height follow)
    width:50px;  //set width to 50px (iff no further instructions about width follow)
    animation: shrink 0.5s;  //run an animation called shrink for 0.5 seconds 
                             //every time this state is entered
        --run animation called 'shrink'--
            @keyframes shrink {  //defines 'shrink'
                from{ width: 60px; height: 60px; }  //redefines starting width and height
                to{ width: 50px; height: 50px; }  //defines ending width and height
            }
        --end animation--
}  //end image definition

transition，只会对（顾名思义）转换进行这些更改。
第一次加载图像时，它们不会发生任何状态更改，因此不会发生转换。