旋转动画不适用于跨度ID

Question

动画有效，但只会使其淡出。 不会像预期的那样旋转。 我在div id上尝试过，它起作用了。

我的验证码正确吗？ 还是有任何错误？

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

这是我的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;
    }

动画有效，但只会使其淡出。 不会像预期的那样旋转。 我在div id上尝试过，它起作用了。

我的验证码正确吗？ 还是有任何错误？

PS我正在使用jquery插件Waypoint，所以这就是为什么有一个.animate的原因。 （它会切换它，因此当元件出现时会创建动画），但这与我的问题不太相关。

另外，我将不遗余力地介绍您的情况，但我确实需要它来定位范围ID而不是div ID。

谢谢！

Answer 1

将范围设置为display: block 。

<span>元素默认设置为display: inline ，而<div>元素默认设置为display: block 。 只能转换块级元素 。 尽管跨度不是块级元素，但是可以通过将其display属性设置为block来使其表现出整体性。

在此处阅读有关内联与块级元素的更多信息： http : //www.impressivewebs.com/difference-block-inline-css/

Answer 2

Div以整行为宽度，但span width区域仅是文本或图像覆盖的区域，因此它没有旋转的地方，请通过style =“ width：500px”给一些宽度进行跨越

因为span是INLINE而div是BLOCK

Answer 3

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

Answer 4

尝试使用display: inline-block

跨度的宽度将缩小以适合内容