使用CSS在鼠标上缩放到原始大小

我使用关键帧在鼠标上方创建一个无限放大和缩小的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%;
}

我的演示链接：

---

非常感谢

你不需要

动画

来实现你想要的。当您将鼠标悬停在

文章

上时，可以使用

转换。请看下面我的基本转换示例

它的作用：

transition: transform 1s ease-in-out;

这将为
1s
的属性
transform
设置一个转换，使用ease
ease-in-out
。当您将鼠标悬停在
.box
上时，
变换：比例（1.25）
将运行，因为我们说过已对其应用了转换。
溢出：隐藏确保内容不会大于其所在的框

您可以根据需要调整设置


body，
html{
保证金：0；
填充：0；
身高：100%；
}
.集装箱{
宽度：100%；
身高：100%；
最小高度：100%；
溢出：隐藏；
}
.盒子{
左边距：50%；
宽度：50%；
最小高度：100%；
背景图像：url（'http://i.imgur.com/AzeiaRY.jpg');
背景尺寸：封面；
背景位置：中心；
-webkit转换：-webkit转换1s轻松输入输出；
转换：转换1s轻松输入输出；
}
.box:悬停{
-webkit转换：比例（1.25）；
转换：比例（1.25）；
}