Ich weiß nicht warum, aber die Transformation, die ich auf das -Tag anwende, funktioniert in Firefox nicht. funktioniert gut in Chrom, Oper, dh und Safari. Ich benutze es in meiner WordPress-Site wie folgt

<a id="spinner" href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name');?></a>

Hier ist ein Beispiel für ein

und ein , die in anderen Browsern als Firefox einwandfrei funktionieren.

http://jsfiddle.net/6HCRs/344/

Hier ist mein Code

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

    #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
2
SF1 26 Dez. 2015 im 21:21

1 Antwort

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -moz-animation-play-state: paused;

  }
0
Gaurav Aggarwal 1 Juli 2016 im 07:09