KEYFRAMES, ANIMACIÓN con CSS y HTML

↑ Me gusta (1)

No siempre animamos a un corazón, sin embargo usamos este ejemplo para dar con un gran resultado usando poco código... Es un buen ejercicio. Para este ejercicio final usamos el siguiente código:

HTML

        <h2>Animación con CSS</h2>
        
        <img class="animation" src="corazon.png">

CSS

body{
    margin: 0px;
    background: #333333;
}

h2{
    color: #ffffff;
    text-align: center;
    margin-top: 40px;
    font-family: arial;
    font-size: 48px;
    text-shadow: 0px 2px 2px rgba(0,0,0,.4);
}

.animation{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: -128px;
    
    animation-name: corazon;
    animation-duration: .8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;    
}

@keyframes corazon{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.1);
    }
}

Gracias por llegar aquí y confiar en Rimorsoft Online

  • Ernesto Canquiz

Italo Morales F. Italo Morales F. 6,800.00 XP