Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 5 vistas

    Como Usar Keyframes en CSS

    Cargado por

    Daniela Gonzalez
    css

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Como Usar Keyframes en CSS

    Cargado por

    Daniela Gonzalez
    5 vistas4 páginas
    css

    Título original

    Como usar keyframes en CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    css

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    5 vistas4 páginas

    Como Usar Keyframes en CSS

    Cargado por

    Daniela Gonzalez
    css

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 4

    Como usar keyframes en CSS

    joshuasainz95
    5849

    ¡Hola Platzi Team! 🚀

    Hoy quiero mostrar cómo puedes crear animaciones en CSS usando


    keyframes. Esto puede ayudarte a dar vida a tus sitios web y mejorar la
    experiencia del usuario. Vamos a ver cómo funciona paso a paso.

    Primera parte.

    🥉Aprendiz

    ¿Qué son las Keyframes en CSS?


    Las keyframes son una característica de CSS3 que nos permiten crear
    animaciones complejas y personalizadas definiendo varios estados de una
    animación y cómo se debe animar entre ellos.
    Estructura básica de una animación con keyframes
    La estructura básica de una animación con keyframes se ve así:
    @keyframes nombreDeLaAnimacion {
    0% {
    /* Propiedades al inicio de la animación */
    }

    50% {
    /* Propiedades a la mitad de la animación */
    }

    100% {
    /* Propiedades al final de la animación */
    }
    }

    Segunda parte.

    🥈Profesional

    Cómo crear una animación con Keyframes


    Vamos a crear una animación básica que cambia el color de fondo de un div.
    1. Primero, define la animación con keyframes.
    @keyframes cambioColor {
    0% {
    background-color: red;
    }

    50% {
    background-color: green;
    }

    100% {
    background-color: blue;
    }
    }

    1. Luego, aplica esta animación a un elemento. Vamos a aplicarla a un div con la


    clase “miDiv”.
    .miDiv {
    animation: cambioColor 3s infinite;
    }

    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

    Animación avanzada con Keyframes


    Ahora que sabes cómo crear una animación básica, puedes experimentar y
    crear animaciones más complejas. Por ejemplo, puedes combinar varias
    propiedades a la vez:
    @keyframes animacionAvanzada {
    0% {
    background-color: red;
    transform: rotate(0deg);
    }

    50% {
    background-color: green;
    transform: rotate(180deg);
    }

    100% {
    background-color: blue;
    transform: rotate(360deg);
    }
    }

    Y luego aplicarlo a un div:


    .miDiv {
    animation: animacionAvanzada 3s infinite;
    }

     animation-name: como se especifica


     animation-duration: como se especifica
     animation-timing-function: como se especifica
     animation-delay: como se especifica
     animation-direction: como se especifica
     animation-iteration-count: como se especifica
     animation-fill-mode: como se especifica
     animation-play-state: como se especifica
     animation-timeline: a list, each item either a case-sensitive CSS identifier or
    the keywords none, auto

    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ejemplo de Transform</title>

    <style>

    .transform-example {

    width: 100px;

    height: 100px;

    background-color: red;

    transform: translate(50%, 0) scale(1.5);

    transition: transform 0.5s; /* Para ver la animación suavemente */

    </style>
    </head>

    <body>

    <div class="transform-example"></div>

    </body>

    </html>

    También podría gustarte