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

183
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); 
    } 
}
<div class="bear"></div>

READ ALSO
Bootstrap &ldquo;Верстка&rdquo;

Bootstrap “Верстка”

Есть проблема с bootstrapНе могу понять, что к чему? В основном, это касается сетки при использовании разных устройств

187
Почему функция insertBefore добавляет элемент не туда, куда я хочу?

Почему функция insertBefore добавляет элемент не туда, куда я хочу?

Коллеги, есть такой пример (далее опишу проблему в комментариях в коде):

174
Bootstrap 4 dropdown profile - выпадающий профиль

Bootstrap 4 dropdown profile - выпадающий профиль

Хочу сделать выпадающее окно профиляНо выпадает оно почему-то не в том месте:

234