javascript - 旋转动画不适用于跨度 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 上试过了，它起作用了。

我的跨度代码是否正确？或任何错误？

附言我正在使用 jquery 插件 Waypoints，所以这就是为什么有 .animate 的原因。 (它切换它因此在元素进入 View 时创建动画)但这与我的问题不太相关。

另外，我就不讲长话了，但我确实需要它来定位 span id 而不是 div id。

谢谢!

Answer 1

将跨度设置为display: block .

<span>默认情况下，元素设置为 display: inline , 而 <div>默认情况下，元素设置为 display: block .只有block level elements can be transformed .尽管 span 不是 block 级元素，但您可以通过将其显示属性设置为 block 使其表现得像一个元素。 .

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