How do I make an Element slide-in, after user selects choice from drop-down, then it slides out.
-
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;
}