CSS 애니메이션 <span>

<span> 요소에 CSS 애니메이션을 적용하려고하는데 작동하지 않습니다. 애니메이션을 <span> 요소에 적용 할 수 있는지 여부를 나타내는 리소스를 찾을 수 없습니다. 그렇다면 오류가 발생하거나 애니메이션이 면역에 영향을 미치고 있습니까?CSS 애니메이션 <span>

편집 : 코드

Inf<span class="inf_o">o</span>rmation 
    <br> 
do<span class="don_n">n</span>e 
    <br> 
we<span class="dbl_l">ll</span>

과 CSS : 당신은 디스플레이 속성을 설정해야합니다 같은

/* animations */ 
.inf_o 
{ 
    -webkit-animation-name: lower_head; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-timing-function:ease-in; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-play-state: active; 
} 

@-webkit-keyframes lower_head 
{ 
    from {margin-top:0px;} 
    to {margin-top:10px;} 
}

출처

2011-07-30 providence

현재 코드로 피들을 만들거나 여기에 게시 할 수 있습니까? – Purag

당신은 span : – sandeep

코드를 편집에 넣으려면 CSS에 display : block을 정의해야 할 수도 있습니다. display : block을 지정할 때 작동합니다. 이 작업을 수행하는 방법은 블록 요소를 사용하여 수행 할 수 있습니다. 나는 수많은 수레와 지우기를 피하고 싶습니다. – providence

보인다. 블록은 단어를 엉망으로 만들 것이므로 인라인을 사용해야합니다. 나는 너를 위해 jsfiddle을 요리했다 : http://jsfiddle.net/jdmiller82/XWkRX/1/

'o'가 움직이는 것을 볼 수있다.

출처

2011-07-30 04:48:10

완벽한, 고마워. – providence

당신을 환영합니다! 행운을 빕니다! –

인라인 표시가 작동하지 않지만 jsfiddle에 따라 인라인 블록이 표시됩니다. 감사! – Josh

내 스팬 애니메이션을 작동시키는 데 어려움을 겪었습니다. 내 경우에는 페이지가로드되어 display의 범위가 none으로 설정됩니다. 나는 많은 일을 시도했지만 결국 불행히도 작업 한 사람이 CSS에서 display: none을 제거하고 페이지가로드 될 때 숨 깁니다.

중요한 점은 jQuery를 사용하여 범위를 숨기거나 표시하는 것입니다.

출처

2017-12-06 15:54:07 Mashakal

CSS 애니메이션 <span>

답변

관련 문제