Давай напишем скрипт и трансформации, которые будут открывать окно. При нажатии на кнопку элементам с классом .blind нужно добавить класс .opened. При добавлении класса .opened, ставни (.blind) должны поворачиваться на 15 градусов и сдвигаться на 100px вдоль оси X....

При наведении на любой элемент списка шоу Netflix должен происходить переход: значение свойства margin-left должно стать -300px; значение свойства font-size должно стать 32px. Длительность перехода - 1s, функция времени - ease-in-out....

Потренируемся с переходами значений css свойств. Для элемента div.box при наведение должны происходить следующие изменения: ширина должна стать 400px, задержка перехода 1s, длительность - 4s; высота должна стать 400px, задержка перехода 2s, длительность - 4s; углы должны стать скруглены на 50%, задержка перехода 2s, длительность - 4s; цвет заднего фона должен стать #861657, задержка перехода не должно быть, длительность - 4s....

Добавим простую анимацию. В ней круг должен бесконечно двигаться по углам квадрата. Сделаем небольшую подготовку перед анимацией. Один цикл анимации элемента div.circle должен длится 8 секунд. Повторятся же анимация должна постоянно....

Теперь опишем нашу анимацию circleMove в keyframe. Начальное положение уже указано. По истечение четверти времени круг должен переместится в верхний правый угол. Через такое же время потом он должен оказаться в нижнем правом углу....

Сделаем анимацию переворачивания карточки На первом шаге проведем некоторую подготовку. Во-первых, задняя часть карты (.face.back) должна быть развернута на 180 градусов вокруг оси Y Во-вторых, у каждой стороны (.back и ....

Переворот карточки у нас будет с хитростью. Если мы ее просто повернем, то она будет немного как бы вылазить наперед. Что бы это избежать, надо у элемента card сместить центр перспективы вправо....

Ты наверняка смотрел фильмы Star Wars. Помнишь, в начале каждого фильма идут титры с предысторией? Сейчас попробуем сделать такую анимацию для первого эпизода. Первым делом подготовим разметку нашей страницы. Внутри body добавим div с классом star-wars, внутри него - один div с классом episode-intro....

Теперь добавим странице стилей. Тег body должен занимать весь экран устройства, а все что выходит за body - должно быть скрыто. Единственную картинку из папки images используй для заднего фона body...

Финальные штрихи и анимация. Добавь элементу div.episode-intro относительное позиционирование. Это позволит сдвигать нам его относительно начального положения. И сразу спрячем наш текст - добавь свойство top со значением 100%. Таким образом блок будет спрятан и до, и после анимации....