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

您不需要animation来实现您想要的效果。将鼠标悬停在transition上时article是合适的。请参阅下面的基本转换示例。

它的作用：

transition: transform 1s ease-in-out;

这将使transform的{{1}}属性转换为宽松1s。当您将鼠标悬停在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);
}

使用CSS

1 个答案: