CODEWITHSUNDEEP
htmlcssanimation
Mario Parra
Mario Parra

Reputation: 1554

CSS3 animation sequence not working

I have a simple CSS3 animation that fades in and out:

@keyframes pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

I also have three spans with IDs that I want to fade into each other, only displaying one at a time.

<h3>
  <span id="first">First.</span> 
  <span id="second">Second.</span> 
  <span id="third">Third.</span>
</h3>

h3 {
  position: relative;
}

h3 span {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0.025;
}

h3 span#first {
  animation: pulse 5s infinite ease-in-out;
}

h3 span#second {
  animation: pulse 5s infinite ease-in-out;
  animation-delay: 5s;
}

h3 span#third {
  animation: pulse 5s infinite ease-in-out;
  animation-delay: 10s;
}

I've set each span's animation to last 5 seconds, while the second and third have 5- and 10-second delays, respectively, to start once the prior has ended, but this isn't the result and the second and third spans load at the same time. How can I achieve this?

Demo: CodePen

Thanks in advance!

Upvotes: 2

Views: 163

Answers (2)

Johannes
Johannes

Reputation: 67798

You have to define the overall time for all three spans as the animation time - 15 seconds, and adjust the keyframes accordingly to take only one third of the overall time from opacity zero to 1 and back to 0 (5 seconds / 33%):

@keyframes pulse {
    0% {
        opacity: 0;
    }
    16.67% {
        opacity: 1;
    }
    33.33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

h3 {
  position: relative;

  span {
    position: absolute;
    right: 0;
    left: 0;
    opacity: 0.025;

    &#first {
      animation: pulse 15s infinite ease-in-out;
    }

    &#second {
      animation: pulse 15s infinite ease-in-out;
      animation-delay: 5s;
    }

    &#third {
      animation: pulse 15s infinite ease-in-out;
      animation-delay: 10s;
    }
  }
}

Here it is in a codepen: https://codepen.io/anon/pen/LzOraW

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273990

You don't have to make the delay equal to the time of the animation as the second element will be have the same animation as the first element after one itertation (5s). You need to make the delay equal to half the time of the animation. Here is an example with only 2 :

@keyframes pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

h3 {
  position: relative;
}

h3 span {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0.025;
}

h3 span#first {
  animation: pulse 5s infinite ease-in-out;
}

h3 span#second {
  animation: pulse 5s infinite ease-in-out;
  animation-delay: 2.5s;
}
<h3>
  <span id="first">First.</span> 
  <span id="second">Second.</span> 
</h3>

and for 3 you can try this :

@keyframes pulse {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }
    
    66% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

h3 {
  position: relative;
}

h3 span {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0.025;
}

h3 span#first {
  animation: pulse 6s infinite ease-in-out;
}

h3 span#second {
  animation: pulse 6s infinite ease-in-out;
  animation-delay: 2s;
}
h3 span#third {
  animation: pulse 6s infinite ease-in-out;
  animation-delay: 4s;
}
<h3>
  <span id="first">First.</span> 
  <span id="second">Second.</span> 
  <span id="third">Third.</span>
</h3>

Upvotes: 1

Related Questions