CSS3 动画没有响应答案

【问题标题】：CSS3 Animations not respondingCSS3 动画没有响应
【发布时间】：2016-09-02 02:05:04
【问题描述】：

我正在尝试仅使用 CSS 为菜单原型实现一个简单的滑入滑出动画。

代码：https://jsbin.com/lelizi/171/edit?html,css,output

当我使用 :target 单击链接来触发它时，我可以播放动画。问题是当我单击透明锚 div 返回主幻灯片时，动画不会触发，它会立即返回主幻灯片。

我错过了什么？

谢谢。

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

您的 CSS 规则设置在不同的元素上。因此，当您定位 main-slide 时，您是在该元素上设置动画，而不是 left-slide 元素。除此之外，您的left-slide 元素是全角的，因此当您尝试单击它时，您可能会定位left-slide 元素的子元素，而不是定位main-slide 元素。

既然你的动画很简单，我可以建议使用过渡吗？

使用过渡的演示：https://jsfiddle.net/zuksntxb/

#left-slide {
    transition : transform 400ms ease-in;
}

#left-slide:target {
    transform : translateX(100%);
}

编辑（奖金回合）：

您可以在目标元素以外的元素上设置 CSS，但它必须是后续兄弟（或后续兄弟的后代）：

#main-slide:target ~ #left-slide {
   /*DO SOMETHING TO #left-slide*/
}

这需要切换幻灯片的 HTML 顺序。它也不适用于您的左幻灯片如何完全覆盖主幻灯片。

【讨论】：