CODEWITHSUNDEEP
htmlcssfirefoxcss-transforms
SF1
SF1

Reputation: 469

CSS transform rotate animation does not work on anchor elements in Firefox

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

Upvotes: 2

Views: 1708

Answers (2)

rajesh
rajesh

Reputation: 1485

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

  }

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

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

Upvotes: 2

Related Questions