Olá, eu gostaria de saber se haveria alguma forma de fazer algum texto aparecer letra por letra da esquerda para direita, como um efeito de fade, usando apenas o CSS.
Obrigado.
Olá, eu gostaria de saber se haveria alguma forma de fazer algum texto aparecer letra por letra da esquerda para direita, como um efeito de fade, usando apenas o CSS.
Obrigado.
hoje, com a Alura e o Google Gemini
<html>
<head>
<style>
/* GLOBAL STYLES */
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
</style>
</head>
<body>
<div class="typewriter">
<h1>Estou animando sua digitação.</h1>
</div>
</body>
</html>Legal Tiago, eu nem havia pensado nessa opção também, muito bom.
Até tentei fazer uns efeitos de fade utilizando essa sua dica aí mas não tive muito sucesso do jeito que eu realmente esperava :(
A única forma que encontrei seria transformando cada letra em um span, o que para um texto grande, seria algo meio absurdo. Seguem dois exemplos (O segundo achei muito bacana):
https://www.phpgang.com/how-to-create-fade-in-fade-out-effect-on-text-using-css-3-animation_636.html
ou