Ska Frenz Ska Frenz - 1 year ago 146
CSS Question

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.

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;

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download