HamSter

jade, gulp-rigger

slick slider

Fade еффект:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

Задать анимацию для картинки с opacity, примерно, на каждые 5%,10%,15% ... 100%

А в стили не пробовали зайти и посмотреть?!
Что тут необычного?

Просто меню на весь экран открывается по клику на кнопку!

Опять много букв и все ни о чем!
Начните изучать и поймете - сможете или нет!!!

пример

Попробуйте добавить object-fit: cover;

еще как вариант

за 300р сделаю!

.nav>li>a {
  background: url(images/nav-div.png) no-repeat right center;
}

фон у ссылок - и есть ваша "рисочка"

greensock в помощь!

пример*

Static HTML: iframe tabs

Ищи создание страницы на facebook (static html facebook) - полно ресурсов. например

*если я правильно поняла вопрос

Если с классом .flipInX то пример

.game-info {
  transition: all .52s ease-in-out;
  opacity: 0;
  transform: translateX(1000%);
}

.game-info.hidden {
  opacity: 1;
  transform: translateX(0%);  
}

Поменяй их в html, если так принципиально!

<div class="container">
  <div class="block block1"></div>
  
  <div class="block block3"></div>
  <div class="block block2"></div>
</div>

У вас идет block2 (red) перед block3 (blue) потому он и "флоатнее right"!
Почему? - Кто первее - тот и в приоритете!

*пардон за объяснение )

наверное из-за этого