.fadedown
{
    animation: fadedown 0.5s linear forwards;

}
@keyframes fadedown
{
    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%);
    }   
}
.fadeup
{
    animation: fadeup 0.5s linear forwards;

}
@keyframes fadeup {
    from {
        transform: scale(1);
        clip-path: circle(100% at 50% 50%);
    }
    to {
        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;
    }   
}