使用 CSS 在鼠标悬停时缩放到原始大小答案

【问题标题】：Scale to original size on mouseout using CSS使用 CSS 在鼠标悬停时缩放到原始大小
【发布时间】：2016-03-26 03:53:27
【问题描述】：

我正在使用关键帧在鼠标悬停时创建无限放大和缩小 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/

非常感谢！

【问题讨论】：

标签： css css-animations

【解决方案1】：

您不需要animation 来实现您想要的。当您将鼠标悬停在 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>

【讨论】：