Анимация кода CSS: создание анимации панды с помощью HTML и CSS

Свойства для анимации CSS

Теперь, когда мы понимаем основы того, как свойства CSS работают с ключевым кадром в- Правило, давайте обсудим основные свойства, которые можно применить к вашей анимации для большей функциональности.

animation-name : определяет название анимации

  div {animation-name: panda;}  

animation-delay : это свойство создает задержку для начала вашей анимации

  animation-delay:  5s;  

animation-iteration-count : это свойство определяет, сколько раз анимация будет запущена

  animation-iteration-count: 4;  

animation-Timing-function : это свойство определяет кривую скорости, например:

• linear : одинаковая скорость от начала до конца
• easy : медленный старт, затем быстрый, медленный конец
• легкость входа : медленный старт
• легкость выхода : медленное завершение

animation-direction : это свойство определяет, будет ли анимация воспроизводиться вперед или назад

   animation-direction: reverse;  

animation-fill-mode : это свойство определяет стиль целевого элемента, когда анимация не воспроизводится. Таким образом мы переопределяем правило CSS, согласно которому анимация не изменяет элемент, пока мы не воспроизведем первый ключевой кадр.

• none : анимация не будет применять любые стили до выполнения
• вперед : элемент сохранит значения стиля, установленные последним ключевым кадром.
• назад : элемент получит значения стиля, установленные первым ключевым кадром.
• both : анимация расширяет свойства анимации в обоих направлениях (вперед и назад)

Обзор анимации Panda

Теперь давайте применим то, что мы узнали об анимации CSS, и создадим нашу собственную анимацию с нуля, используя только CSS и HTML. Мы сделаем простую анимацию панды, идущей по полю. Если вы выберете, вы также можете включить музыку в анимацию. Взгляните на наш конечный продукт ниже.

Вот что нам понадобится для создания нашей анимации:

1. текстовый редактор
2. спрайт файл листа для анимации
3. Аудиофайл по вашему выбору
4. Ваши навыки HTML и CSS

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

Здесь мы видим 12 различных изображений панды. Как только мы объединим их в виде анимации, у нас будет прогулка анимация панды! Для этого мы создадим два фи файлы : Moving_Panda.html и Moving_Panda.css .

Я добавил все необходимые файлы здесь для загрузки.

Вы также можете просмотреть и загрузить код с GitHub.

Написание HTML-кода

Давайте сначала начнем с HTML-части. Помните: HTML-код — это то, что CSS-анимация будет изменять для создания движущегося эффекта. Вы можете добавить код CSS в свой HTML-файл, но для наглядности мы сделаем два разных файла.

Взгляните на код ниже и продолжайте чтение, чтобы получить подробное объяснение каждой части.

          function play () {var audio = document.getElementById (" audio "  );  audio.play ();  }  
 
 
 
   

1. Сначала мы добавим тег для представления корень HTML-документа.

2. Затем мы собираемся добавить тег , который используется для отображения метаданных (любой другой конкретной информации о веб-странице, которая не будет отображаться пользователю). Здесь мы собираемся установить для нашего html файла.

3. Затем мы добавляем , чтобы связать файл CSS с нашим файлом HTML. Здесь атрибут rel обозначает отношение, которое представляет собой таблицу стилей для файла CSS. href используется для связывания внешнего файла CSS.

4. Далее у нас есть наш основной элемент. Здесь мы пишем код, который хотим отобразить на веб-странице. Сначала мы добавляем элемент , который запускает функцию play () для нашего аудио.

5. Затем мы добавляем элемент для получения аудиофайла. Здесь мы даем ему id . Здесь мы видим, что звук будет воспроизводиться в цикле.

6. Затем мы пишем сценарий для play () , которая срабатывает, когда пользователь нажимает на панду. Скрипт получит аудиоэлемент по его id .

7. Затем мы добавим разделение или раздел для панды. а после этого мы собираемся добавить еще один элемент

   для улицы.

   Вот и все. Довольно просто, правда? Теперь перейдем к файлу CSS.

   Выведите свои навыки работы с CSS на новый уровень

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

   Тематика CSS для профессионалов

   Написание кода CSS

   Теперь о анимации CSS! Взгляните на приведенный ниже код и продолжайте чтение, чтобы получить подробное объяснение каждой части.

    body {background: url (https://git.io/JUW4t); background-size: cover; overflow: hidden;} # panda {position  : относительный; верх: 600 пикселей; фон: URL (https://git.io/JUW4L);  width: 250px; height: 330px; animation: walking_animation 1s steps (12) infinite, move_forward 8s linear infinite;} @ keyframes walking_animation {0% {background-position: 0px;} 100% {background-position: 3000px;}} @  keyframes move_forward {0% {transform: translateX (-100px);} 100% {transform: translateX (1366px);}} # street {position: relative; top: 600px; border-bottom: 5px groove green;} 

   1. Сначала мы добавим фоновое изображение для тела. Покроет весь экран. Затем мы добавили overflow: hidden для управления компоновкой главного окна.

   2. Затем мы собираемся добавить несколько стиль нашей панды. Мы устанавливаем его 300px сверху и добавляем фактическое изображение панды. Наш файл панды имеет ширину 3000 пикселей , но мы просто хотим отобразить первое изображение из 12 изображений. Для этого мы меняем ширину и высоту.

   Высота первой панды будет 330 пикселей . Что касается ширины, мы делим ее на 12 равных частей для каждого кадра, поэтому ширина будет 250px.

   1. Теперь добавляем анимацию. Первая анимация называется Walking_animation . Он пройдет через все 12 изображений панды, но не сдвинется с исходного положения. Чтобы заставить его двигаться по оси x, мы добавляем еще одну анимацию под названием move_forward , которая будет перемещать изображение слева направо на экране.

   2. Walking_animation просмотрит все 12 изображений панды. Для этого мы перемещаем background-position с 0 на 3000px , что соответствует ширине изображения.

   3. Move_forward перемещает панду по оси x с помощью свойства преобразования. Мы создадим панду в -100px , и она переместится в конец экрана.

   4. Теперь мы добавьте улицу под пандой. Для этого мы просто добавим border-bottom , а затем установим позицию.

   Ура! Теперь у вас должна быть работающая анимация Панды. Взгляните на полный код ниже и нажмите «Выполнить» , чтобы увидеть его в действии на вкладке «Вывод».

   • Вывод
   • HTML
   • CSS (SCSS)

   Что изучать дальше

   Поздравляем! Вы узнали, как создавать анимацию с помощью CSS и HTML. Теперь ваши навыки веб-разработки стали еще более продвинутыми, и вы готовы заниматься новыми темами. Если вы хотите и дальше совершенствовать свои навыки работы с CSS, вам следует подумать об изучении темы для веб-приложений.

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

   Если вы новичок в веб-разработке и CSS, подумайте о том, чтобы начать с курса Веб-разработка: понимание HTML, CSS и JavaScript , чтобы получить краткий обзор HTML, CSS и JavaScript.

   Удачного обучения!

   Продолжить чтение о веб-разработчиках и CSS

   • Вопросы на собеседовании по CSS: шпаргалка для собеседований с интерфейсом
   • Лучшие практики SASS: 9 советов по интерфейсу для препроцессоров CSS
   • Учебник для начинающих по HTML: создание веб-страницы с нуля с помощью HTML