旋转动画不适用于跨度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！不要认为有一个工作，但。谢谢！ –