How to implement the animation of the language switching block?

Question

css

In the upper right corner of the site there is a block for switching the language. It is necessary to make it so that after loading the page it hangs for 10 seconds, and then leaves to the right behind the viewport. And only a small part with "<" remained to stick out to open it and switch to another language. There are only two languages ​​on the landing page, so there is no need for a menu. How to implement it? I want a pure css implementation. Code examples are very welcome.

<div class="langswitch">
    <a href="/"><b>RUS</b></a>
</div>

div.langswitch {
    display: block;
    text-align: center;
    border: none;
    border-radius: 4px;
    padding: 5px 5px;
    background: #0b77ce;
    position: fixed;
    right: 30px;
    top: 30px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

div.langswitch a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

Answer 1

// элементу присвойте id="langswitch"

// таймаут на 10 сек
let langswitchTimeout = setTimeout(() => {
    document.querySelector('#langswitch').classList.add('langswitch__hidden');
}, 10000);

// при наведении курсора - отменить скрытие
document.querySelector('#langswitch').addEventListener('mouseover', function () {
    if (langswitchTimeout) clearTimeout(langswitchTimeout);
});

// скрыть/показать по клику на .langswitch__toggler
document.querySelector('#langswitch .langswitch__toggler').addEventListener('click', function (e) {
    e.target.closest('.langswitch').classList.toggle('.langswitch__hidden');
});

The element will now be hidden/shown using the langswitch__hidden class. And with css you will figure it out yourself.