I need an element on my page to slide-in automatically 3 seconds after page is opened, and then slide-out after user chooses their preferred choice from the dropdown menu (which is the Element). I want the slide-in/slide-out effect to be from the right-hand side of the page.

The dropdown menu particularly is the 'Google Translate Element', which I have styled to my desired appearance, and I want this to slide in 4 seconds upon page lunch and after user chooses desired language, it slides out.

Below is the code for the styled Element

/*google translate Dropdown */

#google_translate_element select{
background: rgba(246,237,253,0.92) !important;
border: none !important;
color: rgba(54,58,173) !important;
width: 115px !important;
border-radius: 5px !important;
padding: 5px 5px !important;
font-size: 11.8px !important;
position: absolute !important;
margin-top: 84px !important;
margin-left: 232px !important;

}

.vl {
position: absolute !important;
border-left: 3.7px solid green !important;
border-radius: 2px !important;
height: 30px !important;
margin-top: 67px !important;
margin-left:351px !important;
}

/*google translate link | logo */
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
display:none!important;
}

.goog-te-gadget{
color:transparent!important;
font-size:0;
}

/* google translate banner-frame */

.goog-te-banner-frame{
display:none !important;
}

#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;

}

.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}