CSS Animation not firing on device

Can’t seem to get this simple CSS animation to fire on IOS.
Anyone see anything wrong with this?

Can I not run css animations in WebViewUI?

.bounce {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: bounce;

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  40% {
    -webkit-transform: translateY(-10px);
  60% {
    -webkit-transform: translateY(-5px);

Im having the same issues

Yeah, pretty annoying right?

I think it’s an issue with UIWebView supporting css3 transitions (at least within the context of an ionic app).

Your best bet is to handle animations with JS. Checkout the move.js library

Hey @CityLims I used this and it worked great!!!

Also this one is really cool. Dan Edens one has too many animations to bloat your CSS. At least with this you cna cherry pick what you need.

Nice! Glad you got it working. Animate.css seems to be the lib of choice for angular apps.

1 Like

Animate.css does support custom builds now to avoid bloating you css :slightly_smiling: