🔔

Conte um pouco como nosso site te ajudou em algum momento.



6 exemplos de animação com css


Faça uma pequena doação para manter o site! Assim ajudará a desenvolver conteúdos e tutoriais de qualidade!



Postado em: 11/04/2020 15:45:44
Publicidade

Fala dev!! Nessa dica de hoje irei mostrar 6 animações utilizando css puro, espero que gostem.

SCALE UP

 <div class="scale-up">

    <h2>Scale UP</h2>

 </div>
 .scale-up {
    animation: scale-up 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }

 @keyframes scale-up {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(2);
    }
 }

SCALE DOWN

 <div class="scale-down">

    <h2>Scale DOWN</h2>

 </div>
 .scale-down {
    animation: scale-down 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }


 @keyframes scale-down {
    0% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
    }
 }

ROATE

 <div class="rotate">

    <h2>ROTATE</h2>

 </div>
 .rotate {
    animation: rotate 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }


 @keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
 }

ROTATE SCALE UP

 <div class="rotate-scale-up">

    <h2>Rotate Scale UP</h2>

 </div>
 .rotate-scale-up {
    animation: rotate-scale-up 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }


 @keyframes rotate-scale-up {
    0% {
        transform: scale(1) rotate(0);
    }

    50% {
        transform: scale(2) rotate(180deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
 }

FLIP

 <div class="flip">

    <h2>FLIP</h2>

 </div>
 .flip {
    animation: flip 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }

 @keyframes flip {
    0% {
        transform: rotateX(0);
    }

    100% {
        transform: rotateX(-180deg);
    }
 }

SWING

 <div class="_swing">

    <h2>SWING</h2>

 </div>
 ._swing {
    animation: swing 2s ease-out both infinite;
    background-color: aqua;
    width: 200px;
    height: 200px;
    display: flex;;
    justify-content: center;
    align-items: center;
 }

 @keyframes swing {
    0% {
        transform: rotateX(0);
        transform-origin: top;
    }

    100% {
        transform: rotateX(180deg);
        transform-origin: top;
    }
 }

 

copyright ©2012 - 2020 JM Jonathan Moreira - Todos os direitos reservados