HamSter

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

Попробуйте добавить -moz- префикс
-moz-animation: ... ;

за 300р сделаю!

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

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

greensock в помощь!

пример*

Static HTML: iframe tabs

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

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

960px стандарт - не промахнетесь!!!

Если с классом .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"!
Почему? - Кто первее - тот и в приоритете!

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

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

Может быть все-таки какую-то мелочь из урока упустил?

Можно, например, так поправить:

.menu ul li {
  position: relative;
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
}

1. SVG анимации — CSS, SMIL и Snap.svg + там же под видео куча ссылок на ресурсы!
2. greensock №1 по анимации svg на данный момент
3. codepen

Если же вся анимация прописывается через CSS, то можете ли вы подсказать как можно повторить подобный эффект?

Да, можно и css! Читайте о css-animation и transform

бэм
бэм
css
uwebdesign рулит
и вот тут еще понравился ответ Павла
+ loftschool отлично показывают и рассказывают

*это как по мне

stackoverflow

самый лучший 1
самый лучший 2