Rotate animation not working on span ID

Question

The animation works but it only fades it. No rotation like it is supposed to. I tried it on a div id and it worked.

Is my span code correct? or any errors?

<p style="text-align: center;"><span id="jrm-featured-products" style="font-family: Poiret One; font-size: 36px;">Featured  Products</span></p>

And here is my CSS :-

 @-webkit-keyframes rotateInDownLeft {
    0% {
       -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
       -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
        -webkit-transform: rotate(0);
         transform: rotate(0);
         opacity: 1;
      }
    }

    @keyframes rotateInDownLeft {
    0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    opacity: 0;
    }

    100% {
         -webkit-transform-origin: left bottom;
         -ms-transform-origin: left bottom;
          transform-origin: left bottom;
         -moz-transform-origin: left bottom;
         -webkit-transform: rotate(0);
         -ms-transform: rotate(0);
          transform: rotate(0);
         -moz-transform: rotate(0);
          opacity: 1;
      }
    }

    #jrm-featured-products.animate {
         -webkit-animation: rotateInDownLeft 3s;
         -moz-animation: rotateInDownLeft 3s;
          animation-name: rotateInDownLeft;
         visibility: visible;
    }

    #jrm-featured-products {
         visibility:  hidden;
    }

The animation works but it only fades it. No rotation like it is supposed to. I tried it on a div id and it worked.

Is my span code correct? or any errors?

PS I'm using the jquery plugin Waypoints so that is why there is a .animate. (it toggles it hence creating the animation when the elemet comes into view) but that isn't too relevant to my problem.

Also, i'll spare you the long story, but I really need it to target the span id rather than the div id.

thanks!

Answer 1

Set the span to display: block .

<span> elements are, by default, set to display: inline , while <div> elements are, by default, set to display: block . Only block level elements can be transformed . Though a span isn't a block level element, you can make it behave as one by settings its display property to block .

Read more about inline vs block level elements here: http://www.impressivewebs.com/difference-block-inline-css/

Answer 2

Div takes the whole row as its width,but span width area is only the area covered by the text or the image,so it is not getting place to rotate,give some width to span by style="width:500px"

because span is INLINE and div is BLOCK

Answer 3

将跨度显示设置为“块”，默认跨度为嵌入式元素

Answer 4

Try using display: inline-block

The span's width will shrink to fit with the content