Animação de letras pulando com HTML e CSS puro
Usando HTML, CSS e keyframes para realizar animação de letras em sequência como corda
Busca de informações, cálculos, carregamento de recursos demandam tempo e comunicar para o usuário é essencial uma maneira vi recentimente e amei, as letras pulando em sequência
Pode ser vista em funcionamento em Jumping Letters
Como fazer
Contruindo estrutura em HMTL para receber as configurações
<h1>
<span>C</span>
<span>a</span>
<span>r</span>
<span>r</span>
<span>e</span>
<span>g</span>
<span>a</span>
<span>n</span>
<span>d</span>
<span>o</span>
<span>.</span>
<span>.</span>
<span>.</span>
</h1>Aplicação de estilo, em uma página HTML com o básico
body {
color: #e0138c;
background: #282c35;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
h1 {
font-size: 3.6rem;
letter-spacing: 0.1em;
}
h1 span {
display: inline-block;
animation: bounce 3s ease infinite;
}
h1 span:nth-child(2) {
animation-delay: 0.2s;
}
h1 span:nth-child(3) {
animation-delay: 0.4s;
}
h1 span:nth-child(4) {
animation-delay: 0.6s;
}
h1 span:nth-child(5) {
animation-delay: 0.8s;
}
h1 span:nth-child(6) {
animation-delay: 1s;
}
h1 span:nth-child(7) {
animation-delay: 1.2s;
}
h1 span:nth-child(8) {
animation-delay: 1.4s;
}
h1 span:nth-child(9) {
animation-delay: 1.6s;
}
h1 span:nth-child(10) {
animation-delay: 1.8s;
}
h1 span:nth-child(11) {
animation-delay: 2s;
}
h1 span:nth-child(12) {
animation-delay: 2.2s;
}
h1 span:nth-child(13) {
animation-delay: 2.4s;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-2rem);
}
20% {
transform: translateY(0);
}
}
