Why Is My CSS3 Animation Not Working in Chrome or Safari

@-webkit-keyframes counter {
   0% { -webkit-counter-increment: count 0;    }
  10% { -webkit-counter-increment: count 8;    }
  20% { -webkit-counter-increment: count 16;   }
  30% { -webkit-counter-increment: count 32;   }
  40% { -webkit-counter-increment: count 64;   }
  50% { -webkit-counter-increment: count 128;  }
  60% { -webkit-counter-increment: count 256;  }
  70% { -webkit-counter-increment: count 512;  }
  80% { -webkit-counter-increment: count 1024; }
  90% { -webkit-counter-increment: count 2048; }
 100% { -webkit-counter-increment: count 4000; }
}

@keyframes counter {
   0% { counter-increment: count 0;    }
  10% { counter-increment: count 8;    }
  20% { counter-increment: count 16;   }
  30% { counter-increment: count 32;   }
  40% { counter-increment: count 64;   }
  50% { counter-increment: count 128;  }
  60% { counter-increment: count 256;  }
  70% { counter-increment: count 512;  }
  80% { counter-increment: count 1024; }
  90% { counter-increment: count 2048; }
 100% { counter-increment: count 4000; }
}

div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear forwards;
  counter-reset: count 0;
}

<div></div>

CSS Animation working on Chrome but not on Safari

It's because you're not setting the full range on the transform percentage. Safari requires that you specify the 100% endpoint. See this related answer: CSS3 animation not working in safari

css3 animation not working in chrome

You have to put the general animation rule after the browser specific ones:

-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; /* this comes last */

And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:

@-moz-keyframes aia2{
    ...
}

@-webkit-keyframes aia2{
    ...
}
@-o-keyframes aia2{
    ...
}

---

Related Topics