使用CSS动画将div幻灯片更改为另一个div

Question

我在容器（也是div）内有两个div（第1页和第2页），该容器具有overflow：hidden属性，但是当动画启动时，溢出配置将被忽略。 此外，没有出现在上一页移动时应该显示的页面。

https://jsfiddle.net/ok0hpw3s/

<div class="container">
            <div class="page1 animation">11111fwefew</div>
            <div class="page2 animation">2222fewefw</div>
</div>

Answer 1

要强制容器隐藏溢出，您也需要使其绝对定位。

之所以看不到下面的页面，是因为两个内部div都被赋予了动画类，所以两者都在做完全相同的事情。 我不确定您想要的结果是什么，但这是第2页的动画示例，将第1页放在下面，这是通过从第1页删除动画类实现的： https : //jsfiddle.net/n40yd901/

<div class="container">
    <div class="page1">11111fwefew</div>
    <div class="page2 animation">2222fewefw</div>
</div>