Here is a little flip animation that I like to use in dropdowns at my navigations.

selector {
    animation: ws-flip-rotation 500ms ease-in-out forwards;
    -webkit-animation: ws-flip-rotation 500ms ease-in-out forwards;
}

@keyframes ws-flip-rotation {
    0% {
        opacity: 0;
        transform: translateY(45px) rotate3d(1, 1, 0, 45deg);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes ws-flip-rotation {
    0% {
        opacity: 0;
        -webkit-transform: translateY(45px) rotate3d(1, 1, 0, 45deg);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *