En este artículo, vamos a crear una animación de espaciado de letras usando CSS . El espacio entre letras es el espacio disponible entre las letras de una palabra en particular, recorreremos cada paso para lograr este efecto de animación para nuestra página web.
Acercarse:
- Inicialmente, el espacio entre letras será -15px.
- Al 20 %, el espaciado entre letras será de 10 px.
- Finalmente, al 100 %, el espacio entre letras será de 2 px.
Ejemplo: En este ejemplo, animaremos el espaciado entre letras de una palabra. Hemos usado la propiedad animation que se usa para crear animaciones en CSS. Hemos fijado una duración de 3 segundos. Tenemos que usar las reglas de @keyframes que se encargan de hacer un elemento para animar. Podemos usar valores porcentuales para crear animaciones para un elemento. En este caso, estamos usando tres valores porcentuales para nuestro texto. En nuestro caso, animaremos los valores de letter-spacing, que es una propiedad del texto en CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS Code -->
<style>
* {
margin: 0;
padding: 0;
}
#text_container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#text {
font-weight: 100;
opacity: 1;
animation: animate 3s ease-out forwards infinite;
animation-delay: 1s;
}
/* For animation */
@keyframes animate {
0% {
letter-spacing: -15px;
}
20% {
letter-spacing: 10px;
}
100% {
letter-spacing: 2px;
}
}
</style>
</head>
<body>
<div id="text_container">
<h1 id="text">Geeks for Geeks</h1>
</div>
</body>
</html>
Producción:
Animación de espaciado entre letras