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>