Выезжающая картинка

257

21 июня 2018, 23:00

Надо, что-бы при входе на сайт вылезала справа картинка, через 5 секунд заезжает обратно, вот сама картинка:

Answer 1

После загрузки документа, находим блок с медведем (класс bear) и добавляем ему класс bear_vis на котором висит анимация bear-animation. Изначально наш медведь спрятан за пределы экрана.

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); 
    } 
}