CODEWITHSUNDEEP
htmlcsscss-animations
Taco
Taco

Reputation: 2923

Animate div elements sequentially with CSS?

I have a few div elements that are nested in a div with the class .menu; the idea is to transition each element into the page from the outer edges sequentially from top to bottom. I thought I could accomplish this with :nth-child(n) but for some reason I can't get it to work with the positions. I had transitions working just fine with just transition: 1s left/right. However, I decided I wanted a delay between each initial transition to achieve a nice visual effect. I went to W3 Schools and looked into using the animation feature of CSS and decided I needed the following:

.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; } }

I don't believe this is working the way I expect it to as I don't get any animation at all; this may have something to do with the nesting of .main->div:a, div:a, …. Below is the current code for this:

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>

I was able to get transition: 1s left/right to work on .main div:nth-child(odd/even) but not .main:nth-child(odd/even). Why is that?

The primary focus of this question is how should I properly transition my elements from the outer edges of the screen in L, R, L, R, L, R order? If you feel like giving some advice in your answer:

Upvotes: 3

Views: 2224

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

A few things to note:

  1. .menu:nth-child(1) would be looking for a class="menu" element that is the very first child of its parent. Without your context, I can't tell if this exists, but it's likely not what you want in this case.

  2. nth-child() starts at 1, not 0.

  3. div:nth-child(1) will only apply to <div> elements that are the first child of their parent. If you take a look at your HTML, none of your <div> elements are the first child of their parent. You can start at div:nth-child(2) instead.

  4. You can pull out some of the common stuff and put it in an nth-child(odd) and nth-child(even) to avoid so much repitition.

Tidying that up, you might be looking at something like the code below. (I've minified the bulk of your CSS that I haven't touched, just to make it a bit more clear what I changed)

.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>

Upvotes: 4

Related Questions