Question

我有一个带有一些图像的div。当我将鼠标移动到其中一个图像上时，我希望它能够生长，当我将鼠标移出时，我希望它再次缩小。我知道在CSS中没有类似的鼠标，所以我将反向动画放入图像的正常样式中。现在我的问题是，当我加载网站时，所有图像都会缩小动画。

有没有办法只使用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，只会在（顾名思义）过渡时进行更改第一次加载图像时，它们不会经历任何状态更改，因此不会进行转换。

悬停结束时的CSS3动画

1 个答案:

为什么会这样：