css - 使用 CSS 在 mouseout 上缩放到原始大小

Question

我正在使用关键帧在鼠标悬停时创建无限放大和缩小的 div。正如您从下面的链接中看到的那样，父框增加了它的大小，然后子 div 开始放大和缩小。我希望在鼠标移出时，在父 div 缩小之前，子 div 以平滑的方式返回到其常规大小。现在，如您所见，它突然恢复到原来的大小，没有任何平滑度。

我的关键帧:

@keyframes imageZoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.24); }
    100% { transform: scale(1);}
}

@-moz-keyframes imageZoom {
    0% { -moz-transform: scale(1);}
    50% { -moz-transform: scale(1.24); }
    100% { -moz-transform: scale(1); }
}

@-webkit-keyframes imageZoom {
    0% { -webkit-transform: scale(1); }
    50% {-webkit-transform: scale(1.24); }
    100% { -webkit-transform: scale(1); }
}

@-ms-keyframes imageZoom {
    0% { -ms-transform: scale(1); }
    50% { -ms-transform: scale(1.24); }
    100% { -ms-transform: scale(1); }
}

子 div 样式:

#myFeaturedItems:hover article {
    animation: imageZoom linear 50s;
    animation-iteration-count: infinite;
    -webkit-animation: imageZoom linear 50s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

#myFeaturedItems article {
    background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
    background-position: center center;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

我的演示链接:http://emanuelezenoni.com/dev/test/

非常感谢!

Answer 1

您不需要动画 来实现您想要的。当您将鼠标悬停在 article 上时，transition 是合适的。请参阅下面我的非常基本的转换示例。

它的作用:

transition: transform 1s ease-in-out;

这将为 1s 的属性 transform 加上缓动 ease-in-out 的过渡。当您将鼠标悬停在 .box 上时，transform: scale(1.25); 将运行，因为我们说过在其上应用了转换。 overflow: hidden; 确保内容不会比它所在的框大。

您可以根据需要调整设置。

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.box {
  margin-left: 50%;
  width: 50%;
  min-height: 100%;
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  background-position: center center;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
}

.box:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

<div class="container">

  <article class="box">

  </article>

</div>