2014-01-30 64 views
-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。

謝謝!

回答

2

將範圍設置爲display: block

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

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

+0

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

0

事業部取整排的寬度,但跨度面積僅通過文字或圖像覆蓋的區域,所以它是沒有得到地方旋轉,給予一定的寬度由式=跨越「寬度:500像素」

因爲跨度是INLINE和DIV是BLOCK

0

組跨度顯示爲「塊」,在默認跨度是內嵌元素