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

想要创造一种手风琴的效果，但它应该给予揭示效果，因为我已经在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/

来源

2016-07-04 Arun Prakash

（'left'和'width'），而不是'all'你会获得更好的表现。另外，如果你的动画速度稍快，那么你的动作就会减少。试试这个：https://jsfiddle.net/RoryMcCrossan/mzx7kaLd/1/ –

好点。如果我尝试使其居中，图像仍然生涩。例如，试着用'left：-15％;宽度：130％;'。 –

在动画时，千万不要使用左，顶，右，底部。它会产生小故障。相反，使用变换：翻译属性。

我下面的类添加的代码只有一行，并可以立即看到的变化：如果你只适用于需要转变

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

来源

2016-07-04 18:57:08 BlueBird03

我不希望图像像https://www.airforce.com/的第2部分那样明显移动 –

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

回答

相关问题