Animate.css単語の一文字

Question

animate.cssを使用して単語の1文字をアニメートしようとしています。アニメートはある範囲では機能せず、このテーマに関する良い情報は見つかりません。 animate.cssを使用して単語の1文字をアニメーション化するにはどうすればよいですか？あなたはこのアニメーションのブロックレベル要素を必要とする

.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>