CSS АНИМАЦИЯ прыгающего мяча | Видео-уроки по CSS и CSS3

Для анимации используют в большей степени JavaScript, но сейчас, в современных браузерах, мы можем анимировать элементы с помощью CSS3.

CSS позволяет описать в правиле @keyframes промежуточные шаги последовательности исполнения анимации ключевых кадров, которые достигаются в определенные моменты времени при ее исполнения.

С помощью свойства animation указываем анимированные кадры и время их выполнения.

See the Pen aVRZKo by Denis (@Dwstroy) on CodePen.

В этом видео разберем анимацию, которая подойдет для CSS, в ней укажем серии @keyframes и, как эти кадры в сочетании с animation настройками, можно оживить элемент на нашей страничке.

Анимации в CSS3

В отличие от CSS, анимации не имеют полной поддержка браузеров, она лучше всего подойдет к отображению определенных элементов, а не ключевых частей страницы, такие как контента или дизайна сайта.

Анимацию можем запустить один и более раз, а так же повторять бесконечное число.

Можно добавлять несколько анимаций в один и тот же элемент.

В CSS, анимацию можно вызвать - как только страница начала загружается, после задержки загрузки или через какое-то время кода нам удобно ее запустить, можно запустить при изменении :hover, :focus, или :active.

CSS-анимацию также можно запустить или остановить в JavaScript, с помощью переключая (проигрывания анимации) animation-play-state.

Для того, чтобы анимировать элемент (или набор элементов), нам нужно указать серию кадров.

Самая простая форма анимации состоит из двух ключевых слов from один набор стилей в начале, и to другой набор стилей в конце, через определенное количество времени. Эти значения from и to эквивалентны 0% и 100% которые можно задавать сколько угодно, комбинирую ключевые слова и процентные пункты.

Во время анимации, стили между ключевыми кадрами автоматически вычисляются браузером – процесс, известный как tweening.

Каждый кадр определяется как стиль блока CSS свойства, которые будут применены к любому элементу, который использует, этот набор селектора.

Дополнительные кадры можно определить с помощью синтаксиса проценты. Если анимация продолжительностью 10 секунд, в течение первых 7,5 секунд font-size элемента будет расти 100px , а затем в течение следующих 2,5 секунд, он будет убывать обратно вниз 10px. Можно указать, как множественные свойства, как угодно для каждого кадра.

Анимация

Когда кадры определены с помощью правила @keyframes, то тут можно использовать сочетание анимации свойств animation-name.

Существует ряд animation свойств, чтобы настроить анимацию по мере необходимости:

• animation-name (название анимации, указывает имя для связи правила @keyframes и селектором);
• animation-duration (указанное время анимации ее длительность);
• animation-delay (задает задержку перед началом, проигрывания анимации);
• animation-iteration-count (указывает, сколько раз повторять);
• animation-direction (указывает направление повтора анимации, могут воспроизводить (нормальный), в обратном порядке или чередовать назад и вперед);
• animation-play-state (проигрывание анимации, она будет приостановлена и возобновлена);
• animation-timing-function (временная функция, определяет скорость от начала до конца анимации, как анимации между ключевыми кадрами);
• animation-fill-mode (определяет, состояние элемента до и после анимации);

Все эти 8 параметров анимации можно объединить в одном свойстве animation, перечислив через пробел следующим образом:

Единственные необходимые свойства для анимации, по крайней мере, они один раз должны быть прописаны: animation-name (имя анимации) и animation-duration (это ее продолжительность).

Давайте посмотрим на практическом примере прыгающего мяча.

Создадим мяч, через равные width и height получим квадрат, закрасим его в розовый цвет background, а с помощью border-radius с параметром 100%, закруглит его углы.

Теперь сделаем отскок мяча сверху вниз по asbolutely positioning и анимации top или bottom значение с течением времени.

Далее сделаем мяч немного реалистичнее, сдавливая его в нижней части анимации до того, как он станет двигаться обратно вверх, на чуть меньшей скорости.

Теперь придадим мячу движение по экрану вправо, путем добавления второй анимации, где оживляет left само свойство мяча. Они могут быть разделены запятой, так как применяются к одному элементу.

Чтобы сделать анимацию, как будто мяч отскакивает медленно в правую сторону по экрану, можно увеличить продолжительность нашей второй анимации.

Поддержка браузеров

Анимации CSS не поддерживается в IE9 или ниже, в Opera Mini. In IE10, IE11 и Firefox, то @keyframes и animation свойства без префиксов, но -webkit префиксы нужны везде.

Кому интересна анимация в CSS переходите, смотрите следующие уроки, а я буду благодарен за подписку на канал и за Вашу активность в виде лайков и комментариев под видео, с Вами был Денис, до встречи в следующем уроке.