.pop
{
    animation: pop 0.3s linear forwards;

}
@keyframes pop {
    25%
    {
        transform: scale(1.2);
    }

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


.lightSpeedIn
{
    animation: lightSpeedIn 0.7s ease-in forwards;
}
.lightSpeedOut
{
    animation: lightSpeedOut 0.7s ease-out forwards;
}



@keyframes lightSpeedIn {
    from
    {
       clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            transform: scale(0.9);
            clip-path: circle(0% at 50% 50%);
            transition: 0.5s sopacity 1s, transform 1s, clip-path 1s;
    }
    to
    {
        transform: scale(1);
    clip-path: circle(100% at 50% 50%);
    } 
 }

 @keyframes lightSpeedOut {
    from
    {
       clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            transform: scale(0.9);
            clip-path: circle(0% at 50% 50%);
            transition: 0.5s sopacity 1s, transform 1s, clip-path 1s;
    }
    to
    {
        transform: scale(1);
    clip-path: circle(100% at 50% 50%);
    } 
 }