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 свойства, которые будут применены к любому элементу, который использует, этот набор селектора.

@keyframes moveLeft {
  from {left: 0;}
  to   {left: 500px;}
}

Дополнительные кадры можно определить с помощью синтаксиса проценты. Если анимация продолжительностью 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, перечислив через пробел следующим образом:

.box {
  animation: name duration delay count direction play-state timing fill-mode;
}

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

Прыгающий мяч анимация

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

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

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

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

.ball {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  animation: bounce 3s linear infinite;
}
@keyframes bounce {
  0% {bottom: 100%;}
  25% {
    bottom: 0;
    width: 100px;
    height: 100px;
  }
  30% {
    bottom: 0;
    height: 50px;
    width: 110px;
  }
  35% {
    bottom: 0;
    width: 100px;
    height: 100px;
  }
  70% {
    bottom: 100%;
  }
  100% {
    bottom: 100%;
  }
}

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

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

@keyframes moveLeft {
  from {left: 0;}
  to   {left: 100%;}
}
.ball {
  animation: bounce 3s linear infinite, moveLeft 12s linear infinite;
}

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

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

Оставить комментарий: