0

Chrome's webkit is the only one (as I know) supporting animation-fill-mode.

(-webkit-animation-fill-mode: forwards)

On my site the animation works just fine when you load the page on Chrome. However, as it's a mobile site, it's a problem that it doesn't work outside Chrome.

I'd like a pure CSS solution if possible.

Community
  • 1
  • 1
Claudio
  • 884
  • 1
  • 15
  • 31
  • 1
    As of MDN it is supported by all modern browsers. Have you also included the other vendor prefixes? See: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode (Also keep an eye on that big yellow box at the top "This is an experimental technology") – feeela Jan 08 '14 at 08:41
  • My site is designed for mobile, and the compatibility of that with mobile browsers is unknown... Didn't work 2.3.4 Android Dolphin Browser. – Claudio Jan 08 '14 at 08:47
  • Related http://stackoverflow.com/questions/12598930/webkit-animation-fill-modeforwards-not-working-on-android-2-3-5 (and from the answers it looks like it can be done with jQuery) – andyb Jan 08 '14 at 08:49

1 Answers1

0

For other browser you could use :

 -webkit-animation-fill-mode: forwards;  /* it works with Chrome */
    -moz-animation-fill-mode: forwards;  /* works with Mozilla Firefox */
     -ms-animation-fill-mode: forwards;  /* works with IE */
      -o-animation-fill-mode: forwards;  /* works with Opera */
         animation-fill-mode: forwards;  /* should work with all browser .... in theory */

You can find more details on prefixes here :

http://www.w3schools.com/cssref/css3_browsersupport.asp

Have a nice day

Tony
  • 482
  • 4
  • 13