키 프레임 애니메이션이 스팬 id에서 작동합니까?

Question

ID가있는 스팬이 있습니다.

@-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; 
    } 

애니메이션 작동하지만 그것은 단지 그것을 페이드 - :

<p style="text-align: center;"><span id="jrm-featured-products" style="font-family: Poiret One; font-size: 36px;">Featured Products</span></p> 

그리고 여기 내 CSS입니다. 그것은 예상대로 회전하지 않습니다. div id에서 시도해 보았습니다.

내 스팬 코드가 맞습니까? 또는 어떤 오류?

P. jQuery 플러그인 Waypoints를 사용하고 있습니다. 그래서 .animate가 있습니다. (따라서 elemet이 보이면 애니메이션을 생성하므로 토글됩니다.)하지만 내 문제와 관련성이 없습니다.

또한 긴 이야기를 나누 겠지만 실제로 div id가 아닌 span id를 대상으로 지정해야합니다.

감사합니다.

Answer 1

당신은 jrm-featuredproducts에 대한 .을 사용했다. .은 CSS의 클래스를 나타냅니다. #은 CSS에서 ID를 나타냅니다. 따라서 .을 #으로 바꿉니다.

#jrm-featuredproducts.animate { 
-webkit-animation: rotateInDownLeft 3s; 
-moz-animation: rotateInDownLeft 3s; 
animation-name: rotateInDownLeft; 
visibility: visible; 
} 

#jrm-featuredproducts { 
visibility: hidden; 
} 

Answer 2

당신은 당신이 기본적으로 스팬, 그것은 그냥에서의 공간을 차지하지 않는 등의 위치, 폭을 가지고있는 것처럼 행동해야 스팬 요소를 애니메이션을 적용 할 경우. 따라서 span 스타일/css에 display: inline-block;을 추가해야합니다. 귀하의 경우에는 그게 될 것 같아요

#jrm-featured-products.animate { -webkit-animation: rotateInDownLeft 3s; -moz-animation: rotateInDownLeft 3s; animation-name: rotateInDownLeft; visibility: visible; display: inline-block; }

을 대신 가시 난 당신 만 display: inline-block;을 사용할 수 있습니다 그리고 당신은 display: none;를 사용할 수있는 애니메이션을하지 않을 때 숨길 확신 해요.