It is necessary that, at the entrance to the site, a picture crawls out to the right, after 5 seconds it comes back, the picture itself:

  • 2
    CSS3 transition - andreymal
  • one
    CSS3 animation. - Deonis

1 answer 1

After loading the document, we find a block with a bear (class bear ) and add the bear_vis class to it, on which the bear-animation animation hangs. Initially our bear is hidden off the screen.

window.addEventListener('load', function() { var bear = document.querySelector(".bear"); bear.classList.add("bear_vis"); }); 
 body { overflow: hidden; padding: 0; margin: 0; } .bear { background-image: url(https://i.stack.imgur.com/aGoNR.png); background-size: cover; width: 100px; height: 185px; position: absolute; top: 0; left: -100px; transition: 4s all; } .bear_vis { animation: bear-animation 5s linear; } @keyframes bear-animation { 0% { transform: translateX(0); } 40% { transform: translateX(100px); } 70% { transform: translateX(100px); } 100% { transform: translateX(0); } } 
 <div class="bear"></div>