Css 如何重新创建特定动画

我正在尝试制作一个像这样具有过渡效果的图像幻灯片。不幸的是，我只有这张gif图片，而且我还无法找到实时的web示例。幻灯片应一次显示3个图像，然后滑动到下一个3，依此类推。我开始使用slick slider为我做大部分的幻灯片放映工作（这不是一个要求）。但我很难重新创建一个类似于示例中效果的过渡。我尝试在图像之间设置填充动画，但这会导致图像更改大小并导致图像偏离中心。在这种情况下，使用

box size:border box

没有帮助。任何关于如何创建此过渡的帮助都将不胜感激。这是我的密码：

$（文档）.ready（函数（）{
$（'.slider'）。光滑({
无限：是的，
箭头：是的，
幻灯片放映：3，
幻灯片滚动：3，
速度：500
});
});
.wrapper{
位置：相对位置；
框大小：边框框；
}
.滑溜式img{
宽度：100%；
框大小：边框框；
}
.滑滑梯{
填充：0；
框大小：边框框；
}
.滑头活跃{
动画：幻灯片翻译；
动画持续时间：3s；
}
@关键帧幻灯片转换{
0% {
填充：0px；
}
50% {
填充：0px 25px；
}
100% {
填充：0；
}
}
对于性能，一个简单的转换：使用纯CSS进行翻译要好得多。如果你只需要2组3张图片，下面就可以了


/*只需切换“slider”元素上的“toggle”类
/*单击切换按钮时*/
document.getElementById（“切换”）.addEventListener（“单击”，函数（）{
document.getElementById（“slider”）.classList.toggle（“toggle”）；
});
.wrapper{
/*隐藏3个溢出的IMG，防止滚动条*/
宽度：100%；溢出：隐藏；
}
.滑块{
/*经典内联块空白破解*/
字号：0；
/*所以这两个“组”是并排的*/
宽度：200%；
/*设置具有一定延迟的组之间的转换*/
转变：转变1.2s；
}
.滑块img{
/*根据固定数量调整IMG的大小*/
宽度：计算值（100%/6）；
/*设置imgs分离的转换*/
转变：转变1s；
/*设置变换的默认值*/
变换：translateX（0）；
}
/*当“切换”未激活时，最后一个图像将向右移动*/
.slider img:n个子（4）{transform:translateX（40px）；}
.slider img:n个子（5）{transform:translateX（80px）；}
.slider img:n个子（6）{transform:translateX（120px）；}
/*激活时，幻灯片向左移动50%，以便显示第二组*/
.slider.toggle{transform:translateX（-50%）}
/*激活时，前两个图像向左移动或置换*/
.slider.toggle img:n个子（1）{transform:translateX（-80px）；}
.slider.toggle img:n个子（2）{transform:translateX（-40px）；}
/*激活后，最后两个图像将重置为常规位置*/
.slider.toggle img:n个子项（4）{transform:translateX（0）；}
.slider.toggle img:n个子项（5）{transform:translateX（0）；}
.slider.toggle img:n个子项（6）{transform:translateX（0）；}

切换幻灯片
如果您可以将项目分组为3组，则此解决方案适用于您

我设置了不同的延迟，以实现项目分别移动和再次分组的效果


var-page=1；
window.onload=函数（）{
设置间隔（更改页，4000）；
}
函数changePage（）{
var-previous=document.querySelector（“.previous”）；
如果（先前）{
previous.classList.remove（“previous”）；
}
var active=document.querySelector（“.active”）；
active.classList.remove（“active”）；
active.classList.add（“先前”）；
page++；
如果（第3页）{
page=1；
}
var id=“page”+第页；
var newActive=document.getElementById（id）；
newActive.classList.add（“active”）；
}
.carousel{
高度：150像素；
宽度：500px；
位置：相对位置；
}
.第页{
宽度：100%；
身高：100%；
显示器：flex；
位置：绝对位置；
溢出：隐藏；
}
埃伦先生{
身高：98%；
宽度：33%；
字体大小：100px；
边框：实心1px黑色；
转变：转变1s；
转化：translateX（300%）；
不透明度：0；
}
.active.elem{
转化：translateX（0%）；
不透明度：1；
}
.上一篇{
转化：translateX（-300%）；
不透明度：1；
}
.elem:n个孩子（1）{
背景色：番茄；
转换延迟：0s；
}
.elem:n个孩子（2）{
背景颜色：黄色；
过渡延迟：0.1s；
}
.elem:n个孩子（3）{
背景颜色：浅蓝色；
过渡延迟：0.2s；
}
.active.elem:第n个子元素（1）{
过渡延迟：0.3s；
}
.active.elem:第n个孩子（2）{
过渡延迟：0.4s；
}
.active.elem:第n个孩子（3）{
过渡延迟：0.5s；
}

1.
1.
1.
2.
2.
2.
3.
3.
3.
您是否尝试了
边距
而不是
填充
？使用
动画延迟
样式在每个图像的动画开始时尝试交错。要实现橡皮筋效果，请尝试使用
动画计时功能
样式。或者，使用
过渡
样式比使用动画更简单。这看起来很不错+1但我确实计划至少有3个小组。我也喜欢滑溜使它无限。我一直在继续我的原创作品，我现在离它更近了，但它仍然不太正确，我认为以前的过渡需要发展而不是进入，如果这有意义的话：与第n个孩子进行切换的很棒的方法。活动类：）非常好。我正试图修改它，使其在两个方向上都能工作，但我很难让前一组始终保持在左侧。另外，您知道如何使其响应，而不是依赖于设置的宽度和高度吗？谢谢以下是我根据您的代码得出的结论：很抱歉将普通JS与J混合在一起