旋轉動畫不適用於跨度ID

-1

動畫可以工作，但只能淡化它。沒有像它這樣的旋轉應該。我嘗試了一個div id，它工作。旋轉動畫不適用於跨度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，它工作。

我的跨度碼是否正確？或任何錯誤？

P.S.我使用jquery插件Waypoint，所以這就是爲什麼有一個.animate。（它切換它，因此在elemet進入視圖時創建動畫），但這與我的問題無關。

另外，我會告訴你長話短說，但我真的需要它來定位span id而不是div id。

謝謝！

來源

2014-01-30 John_911

將範圍設置爲display: block。

<span>元素默認設置爲display: inline，而<div>元素默認設置爲display: block。只有block level elements can be transformed。雖然跨度不是塊級元素，但可以通過將其顯示屬性設置爲block來使其表現爲一個行爲。

瞭解更多關於內聯VS塊級元素在這裏：http://www.impressivewebs.com/difference-block-inline-css/

來源

2014-01-30 06:43:16 Will

感謝這工作，但它花了t的寬度他認爲它是在，而不是保持它的大小。所以它最終還是搞亂了我的定位。 Errr！不要認爲有一個工作，但。謝謝！ –