animacion.css

body {
    background-color:linen;
}

h1{
    text-decoration-color: : "#005566";;
    padding-bottom: 30 px;
    font-family: "courier";
}
.cuadro{
    border: 1px solid black;
    background-color:white;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
    opacity:0.2;

}

.caja{
    border-radius: 3px;
    height: 100px;
    margin: 50px auto;
    width: 150px;
    background: #40BBBB;
    transition: all 1s;
    
}
.cuadro:hover{
    animation: aparecer 1s ease-in forwards;
    transition:all 1s;

}
.cuadro:hover .caja{
    transform:scale(1.5);

}
p{
    text-align: center;
}
/* Animaciones desde aca*/

@keyframes hover{
    0%{
        transform:scale(0.4);
        opacity:0.2;
    }
    60%{
        transform:scale(1.1);
        opacity:1;
    }
    100%{
        transform:scale(1);
    }
}
@keyframes aparecer{
    0%{
        opacity:0;
    }
    60%{
        opacity:0.8;
    }
    100%{
        opacity:1;
    }
}