旋轉動畫不適用於跨度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

跨度的寬度將縮小以適合內容