2

I don't why but the transform I am applying to the < a> tag does not work in firefox. works fine in chrome, opera, ie and safari. I am using it in my wordpress site like this

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

here's an example of a < div> and a < a> which works fine in other browsers than firefox.

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

here's my 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;
  }
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
SF1
  • 469
  • 1
  • 6
  • 20

2 Answers2

2

CSS Transforms Module Level 1 - Terminology - Transformable Element

A transformable element is an element in one of these categories:

  • an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption
  • an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

There are some cross-browser inconsistencies, but in order for the transform property to have an effect on the element, the display property shouldn't be inline.

Anchor elements are inline by default, therefore you need to change the display to inline-block or block in order for it to work in Firefox. Changing the display property's value to inline-block renders the elements as atomic inline-level elements, and therefore the elements become "transformable" by definition.

Updated Example

#spinner {
  display: inline-block;
}
Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Yep, there are still a lot of browser inconsistencies when it comes to Transform + Animation/Transition. Here is one case where the transform actually happens on inline element and then snaps back in Chrome - http://stackoverflow.com/questions/31768220/why-does-my-transform-snap-back/31768872#31768872. – Harry Dec 27 '15 at 04:33
  • @Harry Excellent--that looks like a very in-depth answer! I'll have to read through that :) – Josh Crozier Dec 27 '15 at 04:34
  • 1
    Thanks :) I'd definitely recommend reading the referenced articles. They have quite a lot of information on how the actual page rendering process works. – Harry Dec 27 '15 at 04:35
0
  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -moz-animation-play-state: paused;

  }
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
rajesh
  • 1,475
  • 10
  • 23