Exemplo de efeitos diversos - Voltar

<table class="table mt-5">
    <tr>
        <td class="align-middle" width="200">Efeito pulsante</td>
        <td class="align-middle"><div class="bola"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Quadrado girando</td>
        <td class="align-middle"><div class="quadrado"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Retângulo deslizando</td>
        <td class="align-middle"><div class="retangulo"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Circulo aumentando</td>
        <td class="align-middle"><div class="circulo"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Texto fade</td>
        <td class="align-middle"><div class="texto-fade">Texto</div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Balanço</td>
        <td class="align-middle"><div class="retangulo-balanco"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Borda animada</td>
        <td class="align-middle"><div class="quadrado-borda"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Circulo multicolor</td>
        <td class="align-middle"><div class="circulo-cor"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Queda</td>
        <td class="align-middle"><div class="bola-queda"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Zoom</td>
        <td class="align-middle"><div class="retangulo-zoom"></div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Texto desaparece</td>
        <td class="align-middle"><div class="texto-desaparecer">Texto aqui</div></td>
    </tr>

    <tr>
        <td class="align-middle" width="200">Quadrado chacoalha</td>
        <td class="align-middle"><div class="quadrado-chacoalha"></div></td>
    </tr>
</table>

tr, td{
    border: none !important;
}
.bola {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #1E90FF;
    animation: pulsante 1s infinite;
}

@keyframes pulsante {
    0% {box-shadow: #1E90FF 0 0 0 0;}
    100% {box-shadow: #87CEFA 0 0 0 20px;}
}

.quadrado {
    width: 50px;
    height: 50px;
    background-color: #FF6347;
    animation: rotacao 2s infinite linear;
}

@keyframes rotacao {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.retangulo {
    width: 80px;
    height: 30px;
    background-color: #32CD32;
    animation: deslocamento 3s infinite alternate;
}

@keyframes deslocamento {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

.circulo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFD700;
    animation: crescimento 2s infinite ease-in-out;
}

@keyframes crescimento {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.texto-fade {
    font-size: 24px;
    color: #8A2BE2;
    animation: fade 3s infinite;
}

@keyframes fade {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.retangulo-balanco {
    width: 100px;
    height: 30px;
    background-color: #FF4500;
    animation: balanco 1.5s infinite ease-in-out;
}

@keyframes balanco {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.quadrado-borda {
    width: 50px;
    height: 50px;
    border: 5px solid #FF1493;
    animation: borda-pulsante 2s infinite;
}

@keyframes borda-pulsante {
    0%, 100% {
        border-width: 5px;
    }
    50% {
        border-width: 15px;
    }
}

.circulo-cor {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4682B4;
    animation: mudar-cor 3s infinite;
}

@keyframes mudar-cor {
    0% {
        background-color: #4682B4;
    }
    50% {
        background-color: #FF4500;
    }
    100% {
        background-color: #4682B4;
    }
}

.bola-queda {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #32CD32;
    position: relative;
    animation: queda 2s infinite;
}

@keyframes queda {
    0% {
        top: 0;
    }
    50% {
        top: 100px;
    }
    100% {
        top: 0;
    }
}

.retangulo-zoom {
    width: 60px;
    height: 40px;
    background-color: #FF6347;
    animation: zoom 2s infinite;
}

@keyframes zoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.texto-desaparecer {
    font-size: 20px;
    color: #6A5ACD;
    animation: desaparecer 4s infinite;
}

@keyframes desaparecer {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.quadrado-chacoalha {
    width: 50px;
    height: 50px;
    background-color: #20B2AA;
    animation: balanco-lateral 1s infinite ease-in-out;
}

@keyframes balanco-lateral {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
}