Вы ознакомились с курсом по CSS-анимации! Надеюсь, вам понравилась эта книга.
Перед завершением давайте рассмотрим некоторые ресурсы, которые вы, возможно, захотите добавить в закладки и ознакомиться с ними для дальнейшего изучения CSS-анимации.
Шпаргалка по CSS-анимации
Я подготовил шпаргалку по переходам и анимации (в формате PDF), в которой описаны различные свойства каждого из них. Шпаргалка размещается на одной странице формата А4. Наслаждайтесь!
Ресурсы для закладок
Хотя полезно знать, как создавать собственные CSS-анимации и переходы, также полезно опираться на существующие платформы. Вот несколько отличных инструментов, которые помогут вам сэкономить время и быстро получить желаемый результат.
Animate.css
Animate.css описывает себя как «просто добавь воды». Вы можете сослаться на CSS-файл и добавить любой из классов Animate к элементу, чтобы увидеть, как он оживает. Вот пример использования Animate.css.
Hover.css
Хорошая альтернатива Animate.css, Hover.css — это ещё один широкий набор готовых к использованию анимаций, которые вы можете применять к ссылкам, кнопкам, логотипам и любым другим элементам HTML.
Другие инструменты
CSS-анимация — это довольно мощный инструмент, который позволяет добиться многого, без обращения к другим технологиям, вроде JavaScript. Однако это не инструмент, который подходит для всех ситуаций. Иногда возникает необходимость в более сложной анимации и JavaScript может помочь с этим. Лучшие приложения основаны на CSS, используют его скорость и поддержку браузерами, но позволяют делать больше.
GSAP
Greensock Animation Platform — это основанный на JavaScript метод создания более сложных анимаций, предлагающий точный контроль и высокую производительность. Могут возникнуть некоторые сложности в освоении, но это мощный инструмент.
Snabbt.js
Snabbt — это мощный и элегантный способ создания более сложной анимации с помощью пользовательских функций времени. Он генерирует матрицы преобразований для анимирования в браузере, что обеспечивает очень хорошую производительность.
CSS Animate
CSS Animate — это инструмент для создания анимации с ключевыми кадрами. Он помогает создавать анимацию путём перетаскивания объекта и использует удобную шкалу времени.
Cubic-bezier.com
Для тех ситуаций, когда нужно создать ощущение жизни, Cubic-bezier.com — мой верный инструмент, который помогает создавать функции времени. В качестве альтернативы аналогичный инструмент встроен в инспектор Chrome.
Следующие шаги
Некоторые задаются вопросом: «Что мне делать дальше, после завершения этого курса?».
Я бы посоветовал искать задачи. За вдохновением обращайтесь к таким сайтам, как Dribbble.com или CodePen.io. Ищите идеи в популярных продуктах (я часто переделываю дизайн Apple), фильмах или телешоу. Задумайтесь, как бы вы могли передать тот или иной эффект в Интернете? Подойдёт ли для этого CSS?
Я бы также посоветовал прочитать некоторые заметки на CSS Tricks, SaraSoueidan.com и, конечно, CSSAnimation.rocks.
Поэтому, если вы не хотите, чтобы ваши знания померкли, практикуйтесь. Найдите поводы для применения и ищите то, что вас интересует. Если вы сможете увлечься, вам будет легче. Повысьте свой уровень владения CSS-анимацией!
Поздравляю, вы завершили введение в CSS-анимацию! Надеюсь, вам понравилось. Добавление анимации в ваши веб-проекты — отличный способ сделать их особенными.
Представляю вашему вниманию важный видеокурс: Level Up Your CSS Animation Skills. Продолжайте учиться создавать удивительные анимации с помощью более четырёх часов высококлассных видеоуроков.
Вы узнаете, как:
- создавать великолепные анимированные главные изображения;
- оживлять пользовательский интерфейс с помощью анимации наведения, касания и кнопок;
- удивлять посетителей с помощью анимации прокрутки и параллакса;
- создавать собственную анимированную карусель;
- настраивать анимацию под все размеры устройств и браузеров;
- оптимизировать CSS-анимацию для повторного использования и размера.
Всё сопровождается забавными примерами, которые вы можете повторить шаг за шагом. К концу курса у вас будут все необходимые навыки для создания впечатляющей анимированной целевой страницы!
Перейдите на сайт Udemy, чтобы узнать, чему вы сможете научиться!