semi-design/packages/semi-animation-styled/src/bouncing_entrances/bounceInRight.css

/*
* Modified based on animate.css and added prefix name to prevent style conflicts
* Reference: https://github.com/animate-css/animate.css
*/

@keyframes semi-bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.semi-bounceInRight {
    animation-name: semi-bounceInRight;
}