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

你需要为这个动画块级元素。只需插入display: inline-block;为您的.animated类，它应该工作！

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