旋转木马松散的响应行为，"image in div"胡佛效应放大

Question

使用flickity carousel我在codepen.io链接中创建了以下示例。以下是我实现的CSS代码：

CSS

.image-hoover { 
  overflow: hidden;
}

.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}

.image-hoover:hover img {
  -moz-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -webkit-transition: all 10s linear;
  -moz-transition:    all 10s linear;
  -o-transition:      all 10s linear;
  -ms-transition:     all 10s linear;
  transition:         all 10s linear;
}

我无法解决的问题是，只有在我关闭这个部分之前，图像才会失去响应行为：

.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}

但在这种情况下，当你解开图像时，很快就会恢复到原来的大小，失去过渡效果，你能建议如何解决这个问题吗？

1此处存在图像的响应行为，但缩放效果会影响hoover松散过渡。

2。在这个示例中，您可以注意到转换效果很好，但如果调整窗口图像的大小，则会放松它们的响应行为。

Answer 1

之所以会发生这种情况，是因为您说过要在所有操作上应用转换，所以当屏幕宽度变化时，图像变化越大，10s转换也会发生。

您需要更改

-webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;

至

-webkit-transition: -webkit-transform: 10s ease;
  -moz-transition:    -moz-transform 10s ease;
  -o-transition:      transform 10s ease;
  -ms-transition:     transform 10s ease;
  transition:         transform 10s ease;

并从：悬停中删除转换。这将起作用。

Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110