Como Usar Keyframes en CSS
Como Usar Keyframes en CSS
Como Usar Keyframes en CSS
joshuasainz95
5849
Primera parte.
🥉Aprendiz
50% {
/* Propiedades a la mitad de la animación */
}
100% {
/* Propiedades al final de la animación */
}
}
Segunda parte.
🥈Profesional
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
Esto hará que el div cambie su color de fondo de rojo a verde a azul en un ciclo
de 3 segundos, y luego repita la animación indefinidamente.
Tercera parte.
🎖️Medalla al Mérito
50% {
background-color: green;
transform: rotate(180deg);
}
100% {
background-color: blue;
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Transform</title>
<style>
.transform-example {
width: 100px;
height: 100px;
background-color: red;
</style>
</head>
<body>
<div class="transform-example"></div>
</body>
</html>