Animate.css 한 단어의 편지

Question

animate.css를 사용하여 한 단어의 단어를 애니메이션화하려고합니다. 애니메이션은 스팬에서 작동하지 않으며이 주제에 대한 좋은 정보를 찾을 수 없습니다. animate.css를 사용하여 한 단어의 한 문자를 어떻게 애니메이트 할 수 있습니까? 당신은이 애니메이션의 블록 레벨 요소를 필요로

.animated { 
 
\t -webkit-animation-duration: 2s; 
 
\t animation-duration: 2s; 
 
\t -webkit-animation-fill-mode: both; 
 
\t animation-fill-mode: both; 
 
} 
 
.animated.infinite { 
 
\t -webkit-animation-iteration-count: infinite; 
 
\t animation-iteration-count: infinite; 
 
\t text-align: center; 
 
} 
 
@-webkit-keyframes tada { 
 
from { 
 
-webkit-transform: scale3d(1, 1, 1); 
 
transform: scale3d(1, 1, 1); 
 
} 
 
10%, 20% { 
 
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
} 
 
30%, 50%, 70%, 90% { 
 
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
} 
 
40%, 60%, 80% { 
 
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
} 
 
to { 
 
\t -webkit-transform: scale3d(1, 1, 1); 
 
\t transform: scale3d(1, 1, 1); 
 
} 
 
} 
 
@keyframes tada { 
 
from { 
 
-webkit-transform: scale3d(1, 1, 1); 
 
transform: scale3d(1, 1, 1); 
 
} 
 
10%, 20% { 
 
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
} 
 
30%, 50%, 70%, 90% { 
 
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
} 
 
40%, 60%, 80% { 
 
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
} 
 
to { 
 
\t -webkit-transform: scale3d(1, 1, 1); 
 
\t transform: scale3d(1, 1, 1); 
 
} 
 
} 
 
.tada { 
 
\t -webkit-animation-name: tada; 
 
\t animation-name: tada; 
 
} 
 
/********************************/ 
 
.ani-g{ 
 
\t font-size: 36px; 
 
\t color: #66ccff; 
 
} 
 
.ani-en{ 
 
\t color: #66ccff; 
 
\t position: relative; 
 
\t bottom: 8px; 
 
\t display: inline; 
 
} 
 
.ani-erate{ 
 
\t color: #666666; 
 
\t position: relative; 
 
\t bottom: 8px; 
 
\t display: inline; 
 
}

<span class="ani-g animated infinite tada">G</span><span class="ani-en">EN</span><span class="ani-erate">ERATE THIS</span> 
 
<h1 class="n-bitwise animated infinite tada">G</h1>

Answer 1

: 다음은 내 코드입니다. .animated 클래스에 display: inline-block;을 삽입하면 올바르게 작동합니다.

.animated { 
 
    display: inline-block; 
 
    -webkit-animation-duration: 2s; 
 
    animation-duration: 2s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.animated.infinite { 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    text-align: center; 
 
} 
 
@-webkit-keyframes tada { 
 
    from { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
    10%, 
 
    20% { 
 
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
    } 
 
    30%, 
 
    50%, 
 
    70%, 
 
    90% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
    } 
 
    40%, 
 
    60%, 
 
    80% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
    } 
 
    to { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
@keyframes tada { 
 
    from { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
    10%, 
 
    20% { 
 
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
    } 
 
    30%, 
 
    50%, 
 
    70%, 
 
    90% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
    } 
 
    40%, 
 
    60%, 
 
    80% { 
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
    } 
 
    to { 
 
    -webkit-transform: scale3d(1, 1, 1); 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
.tada { 
 
    -webkit-animation-name: tada; 
 
    animation-name: tada; 
 
} 
 
/********************************/ 
 

 
.ani-g { 
 
    font-size: 36px; 
 
    color: #66ccff; 
 
} 
 
.ani-en { 
 
    color: #66ccff; 
 
    position: relative; 
 
    bottom: 8px; 
 
    display: inline; 
 
} 
 
.ani-erate { 
 
    color: #666666; 
 
    position: relative; 
 
    bottom: 8px; 
 
    display: inline; 
 
}

<span class="ani-g animated infinite tada">G</span><span class="ani-en">EN</span><span class="ani-erate">ERATE THIS</span> 
 
<h1 class="n-bitwise animated infinite tada">G</h1>