*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card{
    display: inline-block ;
    width: 200px;
    height: 200px;
    margin: 1em;
    background-color: #f44336;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.1);

}
.rippleIn{
    animation: rippleIn 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.rippleOut{
    animation: rippleIn 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-direction: reverse;
}


.zoomIn{
    animation: zoomIn 2s ;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.zoomOut{
    animation: zoomIn 2s ;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-direction: reverse;
}

.rotateIn{
    animation: rotateIn 2s ;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.rotateOut{
    animation: rotateIn 2s ;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-direction: reverse;
}


@keyframes zoomIn{
    
    0% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
       opacity: 0.25;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes rippleIn{
    
    0% {
        transform: scale(0);
        border-radius: 50%;
        opacity: 0;
    }
    40% {
        border-radius: 50%;
    }
    100% {
        transform: scale(1);
        border-radius: inherit;
        opacity: 1;
    }
}

@keyframes rotateIn{
    
    0% {
        transform: scaleX(0) rotateY(180deg);
        opacity: 0;
    }
    100% {
        transform: scaleX(1) rotateY(0deg);
        opacity: 1;
    }
}