JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript://" onclick="$('.example_block').show();">Показать элемент</a><br />
<a href="javascript://" onclick="$('.example_block').hide();">Скрыть элемент</a>
<div class="example_block"></div>

CSS

@keyframes example_animation {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes example_animation {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.example_block {
    display: none;
    width: 300px;
    height: 150px;
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    background: Red;
    
    animation: example_animation 500ms;
    animation-fill-mode: forwards;
    -webkit-animation: example_animation 500ms;
    -webkit-animation-fill-mode: forwards;
}