CODEWITHSUNDEEP
csssvgcss-animations
Nikk
Nikk

Reputation: 7891

CSS3 animation out of sync

I have this keyframe animation, that is supposed to change the color of a div at the 50% mark, then after a 2s delay, it is supposed to animate another div. And another after that. And loop like that.

But it doesn't work like it should. Instead of the div running one after another, they run at the same time.

How can I fix this?

div#wifi-waves svg path#w01 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;
}

div#wifi-waves svg path#w02 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

div#wifi-waves svg path#w03 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

div#wifi-waves svg path#w04 {
    -webkit-animation: colorchnage 1s infinite;
    animation: colorchnage 1s infinite;

    -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

@-webkit-keyframes colorchnage {
    0%   { fill: #ecf0f1; }
    50%  { fill: rgba(26, 60, 88, 0.9); }
    100% { fill: #ecf0f1; }
}

@keyframes colorchnage {
    0%   { fill: #ecf0f1; }
    50%  { fill: rgba(26, 60, 88, 0.9); }
    100% { fill: #ecf0f1; }
}

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 45" xml:space="preserve" preserveAspectRatio="xMixYMid">

    <path id="w04" d=""></path>

    <path id="w03" d=""></path> 

    <path id="w02" d=""></path>

    <path id="w01" d=""></path>

</svg>

Upvotes: 1

Views: 2960

Answers (2)

Gust van de Wal
Gust van de Wal

Reputation: 5291

CSS doesn't read the properties from top to bottom, delaying each animation 2s after the other. You have to give each wave a delay, like this:

div#wifi-waves svg path{
    animation: colorchnage 1s infinite;
}

div#wifi-waves svg path#w02{
    animation-delay: 2s;
}

div#wifi-waves svg path#w03{
    animation-delay: 4s;
}

div#wifi-waves svg path#w04{
    animation-delay: 6s;
}

Upvotes: -1

Harry
Harry

Reputation: 89770

Because you wish to make each item animate one after the other, you should make the sure that the animation on the first item completes before the time the second one starts. Effectively, the delay you add on the each element is the amount of time for which the animation can run on the previous element.

Also, the element which was animated previously should stay idle for the rest of the time (while the animation on other elements are happening) to make it look like they are happening in an iterative manner. So effectively your total animation duration should be equal to the [Delay on each element * No. of elements].

Here you are expecting a 2s delay between each element getting animated and hence the total duration of the animation should be 8s. Plus, the duration on each element should get completed in 2s (which is 25% of 8s).So, your animation code should look like in the below snippet. (The SVG in question wasn't working, so I copied something from the net).

div#wifi-waves svg path#w01 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
}
div#wifi-waves svg path#w02 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
div#wifi-waves svg path#w03 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
div#wifi-waves svg path#w04 {
  -webkit-animation: colorchnage 8s infinite;
  animation: colorchnage 8s infinite;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
@-webkit-keyframes colorchnage {
  0% {
    fill: #ecf0f1;
  }
  12.5% {
    fill: rgba(26, 60, 88, 0.9);
  }
  25% {
    fill: #ecf0f1;
  }
}
@keyframes colorchnage {
  0% {
    fill: #ecf0f1;
  }
  12.5% {
    fill: rgba(26, 60, 88, 0.9);
  }
  25% {
    fill: #ecf0f1;
  }
<div id="wifi-waves">
  <svg width="200px" height="260px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="w01" d="M10 80 Q 95 10 180 80" stroke="black" fill="#ecf0f1" />
    <path id="w02" d="M10 120 Q 95 40 180 120" stroke="black" fill="#ecf0f1" />
    <path id="w03" d="M10 160 Q 95 80 180 160" stroke="black" fill="#ecf0f1" />
    <path id="w04" d="M10 200 Q 95 120 180 200" stroke="black" fill="#ecf0f1" />
  </svg>
</div>

Upvotes: 3

Related Questions