• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Свойство для создание HTML5 анимации в CSS (Свойство animation: все параметры анимации на HTML + CSS)
Свойство для создание HTML5 анимации в CSS
Kosten
Дата: Среда, 2020-02-12, 00:05 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29181
Награды: 62


Как известно, что HTML5, это новейший стандарт HTML, который содержит множество новых элементов и атрибутов, где также улучшают семантику, возможности подключения, производительность, доступ к устройствам, 2D и 3D графику, анимацию и стилизацию в интернете.

С HTML5 анимация теперь может быть запрограммирована в браузере. После этого зрители могут наслаждаться всевозможными анимациями на основе HTML5, CSS3 и JavaScript. Помимо таких элементов, как теги video и audio, HTML5 также предлагает элемент canvas, который позволяет создавать игры и создавать привлекательные анимации.

Прежде чем показать вам, как создавать анимацию с помощью элемента HTML5 canvas, мы объясним, как две сопутствующие технологии - CSS3 и JavaScript - делают возможной анимацию в браузере, вместе с примерами.

CSS3 анимации

CSS3 поставляется с transformation и animation свойствами. Свойство transformation сообщает браузеру, чтобы вычислить промежуточные кадры между двумя состояниями. Всего существует восемь свойств анимации, а именно:

- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state


Для воспроизведения анимации укажите animation-duration свойство.

Кроме того, CSS3 поставляется с keyframes основой CSS анимации, где keyframes и animation идет рука об руку с keyframes определением того, как анимация выглядит на каждом этапе своей временной шкалы.

Проверьте этот пример:

Код
div {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: SkrrrPaPaPum;
  animation-name: SkrrrPapaPum;
}

Здесь имя анимации, как указано animation-name, где есть SkrrrPapaPum, что также определяем, как выглядит анимация keyframes.

Например:

Код
@keyframes SkrrrPapaPum {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

Не стесняйтесь определить свой собственный стиль анимации, указав все свойства, подходящие для области keyframesдействия.

Ниже приведены велеколепные примеры анимации с помощью CSS3.

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


See the Pen
CSS дождь
by Kocsten (@kocsten)
on CodePen.



Квадрат выполнен с возможностью поворота на 360 градусов, а продолжительность анимации составляет 10 секунд.

Анимированная солнечная система


See the Pen
An animated solar system
by Kocsten (@kocsten)
on CodePen.



Теперь взглянем на некоторые примеры суперхолодной анимации HTML5 Canvas.

Водопад


See the Pen
Canvas Waterfall
by Kocsten (@kocsten)
on CodePen.



Обратите внимание на JavaScript в приведенном выше CodePen. В игре много вычислений: от проверки наличия элемента canvas до получения контекста 2D-анимации и определения логики перехода частиц водопада к использованию браузера requestAnimationFrame и cancelAnimationFrameAPI.

Этот requestAnimationFrame метод предоставляет вам более плавный и эффективный способ построения анимации, вызывая кадр анимации, когда система готова его нарисовать. Количество обратных вызовов обычно составляет 60 раз в секунду и может быть уменьшено при работе в фоновых вкладках.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Свойство для создание HTML5 анимации в CSS (Свойство animation: все параметры анимации на HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: