html - 悬停结束时的 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，只会对(顾名思义)转换进行这些更改。
第一次加载图像时，它们不会经历任何状态变化，因此不会发生过渡。