CSS Animation not firing on device

1

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);
  }
}
2

Im having the same issues

3

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

4

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

5

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.

6

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

1 Like
7

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