/* Set initial styling for the element */
.my-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}



    /* Add a class to the element to trigger the animation */
    .my-element.show {
        opacity: 1;
        transform: translateY(0);
        position: relative;
        animation: MyDiv 0s 5s forwards;
        animation-duration: 0.5s;
        animation-iteration-count: 2;
        animation-timing-function: ease-in;
        animation-direction: alternate;
        float: right;
        margin-right: 25px;
        animation-delay: 1s;
        visibility: hidden;
    }

@keyframes MyDiv {


    0% {
        right: 0px;
        top: 0px;
        visibility: visible;
    }

    100% {
        right: 10px;
        top: 0px;
        visibility: visible;
    }

    to {
        visibility: visible;
    }
}