Animate.css ein Buchstabe eines Wortes

Question

Ich versuche, einen Buchstaben eines Wortes mit animate.css zu animieren. Die Animation funktioniert nicht in einer Spanne und ich kann keine guten Informationen zu diesem Thema finden. Wie kann ich einen Buchstaben eines Wortes mit animate.css animieren? Hier ist mein Code:

.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

Sie benötigen ein Block-Level-Element für diese Animation. Fügen Sie einfach display: inline-block; für Ihre .animated Klasse ein und es sollte funktionieren!

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