1. Создаем CSS-файл и HTML-файл 2. Создаем основу HTML и подключаем CSS-файл 3. Создаем контейнер <div></div>. 4. Изменяем контейнер в CSS 5. Создаем @keyframes XXX{ }. Вместо 'XXX' надо написать, как будет называться ваша анимация. 6. Вся анимация делится на части, чтобы указать в какой именно части анимации произойдет изменение в фигурных скобках пишут процент 0% и открывают фигурные скобки {}. И в этих фигурных скобках мы пишем что именно изменится в этой части анимации. После, нужно показать какой объект будет изменяться по этой анимации...
Статья связана с репозиторием на GitHub. Ну что ж, теперь, когда мы разобрались с блоками и таблицами, попробуем создать какой-нибудь документ с текстом и картинками. Для статьи нашел скан такого вот креативного варианта объяснительной. Арт-директор все-таки! Для начала создам новый проект: index.html, index.css и папку image, в которую положу вырезанные картинки из скрина картинки. Как видно, цвет на картинке не однородный, поэтому убрал фон в онлайн фотошопе. Всё готово и можно верстать. Для начала "шапка": это у нас будет div, "прижатый вправо"...