如何在悬停时创建显示图像动画效果？

Question

想要创造一种手风琴效果，但它应该具有揭示效果，就像我在JSFiddle中所做的那样。但CSS3动画是错误的 - 如果仔细注意，图像会徘徊并以悬停为中心。如何顺利实现？

.accordion li .accordion-img {
  position:relative;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
  overflow: hidden;
  left: 0;
  right: 0;
}   
.accordion li.active .accordion-img {
  left: -15%;
  width: 130%;
}

https://jsfiddle.net/sunrays/mzx7kaLd/

编辑：图片不应在悬停时明显移动。简而言之，我试图像https://www.airforce.com/

的第二部分一样尝试动画效果

Answer 1

动画制作时，切勿使用左，上，右，下。它会造成毛刺。而是使用 transform：translate 属性。

我在以下类中只添加了一行代码，您可以立即注意到这些更改：

.accordion li.active .accordion-img {
  transform: translate(-15%, 0px);
  width: 130%;
}