用CSS顺序制作div元素动画

Question

我有几个div元素，它们嵌套在具有类.menu的div中；这个想法是将每个元素从外边缘按从上到下的顺序转换到页面中。我以为我可以用:nth-child(n)完成这项工作，但由于某种原因，我无法将其用于这些职位。我只使用transition: 1s left/right就可以很好地进行转换。然而，我决定在每个初始过渡之间都要延迟一段时间，以获得良好的视觉效果。我去了W3学校，研究了使用CSS的animation功能，并决定我需要以下内容：

.menu div { position: relative; }
.menu:nth-child(0) {
left: 60%;
animation: 1s transitionLeft forwards;
}
.menu:nth-child(1) {
right: 60%;
animation: 1s transitionRight forwards;
animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }

我不相信这是我期望的方式，因为我根本没有得到任何动画；这可能与CCD_ 8的嵌套有关。以下是当前的代码：

body {
background-color: #222;
color: #fff;
}
.menu {
transition: 1s all;
text-align: center;
overflow: hidden;
padding-bottom: 5%;
}
.menu > h1 {
transition: 1s all;
cursor: default;
font-size: 10vw;
margin: 2% 0 0 0;
}
.menu a {
transition: 0.25s all;
text-decoration: none;
color: #fff;
margin: 10px 0 10px 0;
font-size: 3vw;
}
.menu div { position: relative; }
.menu div:nth-child(0) {
left: 60%;
animation-name: transitionLeft;
animation: 1s transitionLeft forwards;
}
.menu div:nth-child(1) {
right: 60%;
animation: 1s transitionRight forwards;
animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }

<div class="menu">
<h1>Perpetual J Studios</h1>
<div><a href="#">About</a></div>
<div><a href="#">Contact</a></div>
<div><a href="#">Games</a></div>
<div><a href="#">Software</a></div>
<div><a href="#">Apps</a></div>
<div><a href="#">Academy</a></div>
</div>

我能够让transition: 1s left/right在.main div:nth-child(odd/even)上工作，但不能让.main:nth-child(odd/even)工作。为什么？

---

这个问题的主要焦点是我应该如何以L, R, L, R, L, R的顺序正确地从屏幕的外边缘转换元素？如果你想在回答中给出一些建议：

• 这种方法有哪些潜在的gotchas？
  • 除了确保我使用跨浏览器标记(如webkit)之外
• 关于这种行为，我应该考虑几点

Answer 1

需要注意的几点：

1. .menu:nth-child(1)将寻找一个class="menu"元素，该元素是其父元素的第一个子元素。如果没有你的背景，我无法判断这是否存在，但在这种情况下，这可能不是你想要的。

2. nth-child()从1开始，而不是从0开始。

3. div:nth-child(1)将仅应用于作为其父元素的第一个子元素的<div>元素。如果您查看HTML，则<div>元素都不是其父元素的第一个子元素。您可以改为从div:nth-child(2)开始。

4. 你可以把一些常见的东西放在nth-child(odd)和nth-child(even)中，以避免重复太多。

整理一下，您可能会看到下面的代码。(我缩小了你的CSS中我没有接触过的部分，只是为了让它更清楚我改变了什么)

.menu,.menu>h1{transition:1s all}body{background-color:#222;color:#fff}.menu{text-align:center;overflow:hidden;padding-bottom:5%}.menu>h1{cursor:default;font-size:10vw;margin:2% 0 0}.menu a{transition:.25s all;text-decoration:none;color:#fff;margin:10px 0;font-size:3vw}.menu div{position:relative}@keyframes transitionLeft{100%{left:0}}@keyframes transitionRight{100%{right:0}}
.menu div:nth-child(odd) {       
right: 60%;
animation: 1s transitionRight forwards;
}
.menu div:nth-child(even) {
left: 60%;
animation: 1s transitionLeft forwards;
}
.menu div:nth-child(3) { animation-delay: 0.5s; }
.menu div:nth-child(4) { animation-delay: 1.0s; }
.menu div:nth-child(5) { animation-delay: 1.5s; }
.menu div:nth-child(6) { animation-delay: 2.0s; }
.menu div:nth-child(7) { animation-delay: 2.5s; }

<div class="menu">
<h1>Perpetual J Studios</h1>
<div><a href="#">About</a></div>
<div><a href="#">Contact</a></div>
<div><a href="#">Games</a></div>
<div><a href="#">Software</a></div>
<div><a href="#">Apps</a></div>
<div><a href="#">Academy</a></div>
</div>