Animation html: animation — CSS: Cascading Style Sheets - Блог сумасшедшего сисадмина

Содержание

Онлайн-курс «Анимация для фронтендеров» — HTML Academy

Уровень курса: синьоры для мидлов

Формат курса: асинхронный

Начните обучение, когда удобно вам

Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени.

Запишитесь на консультацию

Оставьте свои контакты, мы свяжемся с вами и ответим на все вопросы.

Телефон *

Эл. почта *

Соглашаюсь на обработку персональных данных и получение рекламных и информационных сообщений в соответствии с «Политикой» и «Пользовательским соглашением».

*Обязательное поле

Записаться на консультацию

Почему курс профессиональный

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

НаставникиПроверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.

Критерии качестваПрофессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.

Настоящие проектыВ течение обучения вы выполняете настоящие проекты.

Настоящие проекты

В течение обучения вы выполняете настоящие проекты.

В чём отличие от тренажёров?

Как раз в этой триаде. На тренажёрах вы изучаете базовые конструкции языков, а на профессиональном курсе вы осваиваете приёмы и методики решения профессиональных задач.

Как проходит

обучение на курсе

Что вас ждёт на обучении

Структурированная теория
В каждом разделе вы изучаете теорию и методику решения практических задач: из учебника, подобранных нами материалов и демонстраций кода на примере учебного проекта.
Практика
После изучения теории и методики выполняете домашние задания, в которых работаете над своим проектом и закрепляете учебный материал.
Ревью кода и консультации
После каждого задания наставник проверяет качество работы и даёт обратную связь. А если остались вопросы, можно записаться на консультацию — наставник поделится опытом и расскажет, как можно сделать ещё лучше.

Подходит ли вам этот курс

Курс проходит в асинхронном формате. Вы можете начать обучение в любое время и двигаться по программе с комфортной вам скоростью.
Главная ценность курса — большой объём обратной связи от наставника, который детально разберёт ваш код, определит пробелы в понимании материала и поможет со всем справиться.
Курс рассчитан на опытных разработчиков, желающих поднять свои навыки. Для его освоения нужны навыки вёрстки и программирования на JavaScript. Курс подойдёт и для новичков, которые успешно прошли курсы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».
В курсе мы используем самые эффективные для обучения профессионалов форматы: тексты, тренажёры, скринкасты и демонстрации. Мы не злоупотребляем видео и используем его только там, где оно необходимо.

Преимущества курса

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

Записаться на курс

Консультация по телефону 8 800 555-86-28.

Наставники — это опытные профессионалы, работающие в индустрии

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

Чтобы отбирать таких специалистов, мы построили уникальную систему привлечения и фильтрации.

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

Процесс отбора наставника

Формальные требования
Проверяем, кем и где кандидат в наставники работал, какой у него опыт, а также смотрим на его код.
Собеседование
Проводим часовое собеседование, на котором проверяем знание предметной области, а также умение понятно объяснять и другие человеческие качества.
Регулярная обратная связь
Прошедших собеседование кандидатов допускаем до студентов. На этом путь наставника только начинается. После каждого курса мы собираем обратную связь, которая помогает наставникам совершенствоваться.

Процесс работы с наставником

Во время курса вас будут сопровождать опытные наставники. Они будут делать ревью кода, проверять практические задания, отвечать на вопросы и делиться секретами мастерства. На курсе действует Облако наставников — платформа, с помощью которой можно отправить задание на проверку и получить консультацию от любого доступного на курсе наставника.

Учебный проект

На примере учебного проекта мы расскажем и покажем, как правильно делать крутые анимации. После этого вы сможете попрактиковаться, выполняя задания по личному проекту.

В течение курса мы будем анимировать промо-страницу фестиваля иллюзионистов «Иллюзион», которая, как и сам фестиваль, не должна оставить равнодушным ни одного посетителя.

Личный проект

В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать и самостоятельно, и в паре с наставником.

Проект уже свёрстан. В течение курса вы сфокусируетесь на главном: супер анимациях.

Вам предстоит сделать анимации для сайта конкурса игры, где игрокам предстоит угадать пункт назначения путешествия. Чтобы попробовать свои силы, им нужно будет сыграть в чате с ботом ИИ «Соня». А вам — с помощью анимаций создать весёлую атмосферу развлечения.

Отзывы компаний

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

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Яна Крикливая разработчик клиентской части, Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

Что касается вёрстки и создания веб-страниц, мы в команде трепетно относимся к семантической разметке и её пониманию, умению писать на чистом CSS и системному мышлению у разработчика. Страницы должны быть не только красивыми для пользователя, но и быстро загружаться, быть структурированными и, конечно, удобными для работы в команде. При нашем объёме проектов уделять этому внимание очень важно.

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

В этом смысле, подход Академии к обучению кажется адекватным: кодревью от опытного разработчика хорошо подготавливает к работе. Особенно ценно, что вся работа над проектами сразу идёт через Git — у нас также вся работа в компании проходит через обязательные ревью.

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

Иногда бывает, что при выходе нового джуниор-разработчика, менторить приходится до самых мелких моментов. В случае с Павлом вливание в команду прошло практически беззаботно.

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

Сергей Чикирев Wrike Website Team Lead

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

Ребята приходили с хорошей базой и горящими глазами, быстро вливались в процессы и команду. Сейчас в Ostrovok.ru работают три выпускника Академии — все на позиции джунов и отлично справляются.

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

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

Валерия Шемякина Менеджер по обучению Ozon.

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

Если вы боитесь, что не разберётесь или «программирование — это не для вас», то HTML Академия подойдёт вам идеально. Всегда будет у кого спросить и кто вас поддержит.

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

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

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

Огромное спасибо HTML Academy за крутых выпускников! Три человека брали к себе на стажировку, в последующем два из них остались у нас на постоянной работе. Классные ребята с хорошим бэкграундом! Академия обучает сильных специалистов!

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

Программа курса

После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете. На курсе предусмотрено более 40 практических заданий и 10 консультаций с наставником.

Раздел 1

Основы анимации

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

Также мы рассмотрим 12 принципов выразительной анимации. После этого мы создадим простые анимационные переходы в CSS.

Pipeline выполнения кода в браузере.
CSS transition и animation: отличия.
Временные функции: встроенные, cubic-bezier.

Раздел 2

Анимация в CSS

Во втором разделе продолжим знакомиться с анимацией на основе CSS.

Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
Познакомимся с принципами Material design.
Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.

Раздел 3

SVG Анимация

В этой главе мы изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG:

Рассмотрим, в каких случаях лучше использовать SMIL, а в каких от неё стоит отказаться.
Научимся описывать анимацию движения объекта по кривой, запускать анимацию по событиям, например «нажатие», «завершение другой анимации» и т.д.
Подробно рассмотрим ещё 4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги, выразительная деталь.
В практической части научимся создавать эффект рисования изображения и анимационного полета.

Раздел 4

Покадровая анимация. JavaScript и Canvas

В этой главе мы перейдём к знакомству с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS и стандартные значения FPS: 24, 30, 60. Что такое плавающий FPS. Рассмотрим примеры покадровой анимации:

мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.

А также продолжим углубленно изучать принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок — внимание разработчика к деталям, качество финальной картинки.

В практической части научимся использовать:

window.requestAnimationFrame.
Canvas и его параметры и методы.
Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
Методы update() и render().

Раздел 5

WebGL. Шейдеры

В этой главе мы продолжим работать с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Исследуем, какие бывают растровые эффекты:

цветовые фильтры
OpenGL
маски — Lumination, Alpha
цветовые наложения — blending
шумы
смещения
размытия

А также изучим анимацию растровых эффектов: постоянное движение и изменение параметров.

На практике рассмотрим:

Что такое вершинные и фрагментные шейдеры.
Как использовать WebGL 3d для 2d эффектов.
Что такое геометрия.
Pipeline WebGL.
Взаимодействие JS и WebGL.
Типы данных в WebGL.
Написание GLSL — основы.

Раздел 6

Three.js часть 1: 3D в браузере

В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.

Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:

Прямое задание параметров: скорости или ускорения (перемещения или вращения).
Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().

В практической части начнём работать с библиотекой Three.js. Изучим:

Способы описания объектов: положение, геометрия и материалы.
Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
Флаги для update.
Цикл render.
Анимации положения. Метод анимации Morph.
Сцена + камера. Добавление объектов на сцену. Группировка.
Свет. Виды источников света. Материал Matcap.

Раздел 7

Three.js часть 2: Работа с камерой

В этой части мы рассмотрим, что такое камера в WebGL, и в частности в Three.JS:

Управление камерой.
Базовые движения камеры.
Риги камер.
Разные конструкции ригов для разных видов управления.

В практической части:

Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
Риги камер.
Рассмотрим переключение между камерами — монтаж. Правила монтажа.

Раздел 8

Будущее анимации в браузере

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

Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
Изучим основы Houdini API.
Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
Поговорим о том, как можно дальше развиваться в создании анимации.

Записаться на курс

Консультация по телефону 8 800 555-86-28.

Зарегистрироваться и оплатить

курс «Анимация для фронтендеров»

$419

$479

Оплата целиком
Корпоративным клиентам

Ваше имя *

Ваш телефон *

Ваша электронная почта *

Нажимая «Оплатить», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями Лицензионного договора».

Промокод

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

После оплаты курса вам придёт письмо с инструкциями и ссылкой для доступа в интерфейс участника.

Если у вас возникли проблемы при оплате, пожалуйста, напишите нам

Несколько правил для корпоративных клиентов:

Мы работаем по договору оферты.
Стоимость участия для юридических лиц зафиксирована — полный прайс-лист.
Услуги не облагаются НДС на основании ст. 145.1. Налогового кодекса Российской Федерации.

Чтобы получить счёт на оплату, отправьте на почту:

1. Информацию об Асинхронном курсе, доступ к которому вы хотите приобрести.

2. Реквизиты вашей организации.

3. Ссылку на профиль вашего сотрудника на сайте Академии, который будет использовать материалы.

Телефон *

Электронная почта

Соглашаюсь на обработку персональных данных и получение рекламных и информационных сообщений в соответствии с «Политикой конфиденциальности» и «Пользовательским соглашением».

Запишитесь на консультацию

Мы любим отвечать на вопросы. Поэтому ждём ваших контактов, чтобы поскорее на всё ответить.

Телефон *

Эл. почта *

*Обязательное поле

или

Эл. почта

Пароль

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Вход

Банковской картойНаличными через терминалС телефонаЭлектронными деньгамиИнтернет-банкинг

Оплатить банковской картой

CloudPaymentsЮKassaРобокасса

CSS учебник

CSS3 анимация — вдохновение для веб-разработчиков.

С ее помощью можно создавать эффекты, которые раньше воспроизводились с помощью скрипта и с использованием графических редакторов.

Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after. Список свойств, которые можно анимировать, приведен здесь

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

1. Правило @keyframes

CSS3-анимация состоит из двух компонентов: сначала идет объявление@keyframes, которое затем используется в свойстве animation элемента. Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени. Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.

Также можно комбинировать ключевые слова и процентные пункты. Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

Синтаксис


    @-webkit-keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}

Теперь, объявив @keyframes, мы можем ссылаться на него в свойстве animation:


    h2 {
font-size: 3.5em;
color: darkmagenta;
-webkit-animation: shadow  2s infinite ease-in-out;
animation: shadow  2s infinite ease-in-out;
}

2.

Название анимации Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.

Синтаксис


    div {
    -webkit-animation-name: mymove;
    animation-name: mymove;
    }

3. Длительность анимации

Свойство устанавливает длительность анимации, например:

animation-duration: 1s;.

Не наследуется.

animation-duration
Значения:
время (`s` / `ms`)	Длительность анимации задается в секундах или миллисекундах.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


    div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

4.

Временная функция

Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задается при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.

animation-timing-function
Значения:
`ease`	Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует `cubic-bezier(0.25,0.1,0.25,1)`.
`linear`	Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует `cubic-bezier(0,0,1,1)`.
`ease-in`	Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует `cubic-bezier(0.42,0,1,1)`.
`ease-out`	Анимация начинается быстро и плавно замедляется в конце. Соответствует `cubic-bezier(0,0,0.58,1)`.
`ease-in-out`	Анимация медленно начинается и медленно заканчивается. Соответствует `cubic-bezier(0.42,0,0.58,1)`.
`cubic-bezier(x1, y1, x2, y2)`	Позволяет вручную установить значения от 0 до 1.На этом сайте вы сможете построить любую траекторию скорости изменения анимации.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


div {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}

ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier()

5. Анимация с задержкой

Свойство игнорирует анимацию заданное количество времени, что дает возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration. Не наследуется.

animation-delay
Значения:
время (`s` / `ms`)	Длительность анимации задается в секундах или миллисекундах.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


div {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}

Пример

6. Повтор анимации

Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.

animation-iteration-count
Значения:
число	С помощью целого числа задается количество повторов анимации.
`infinite`	Анимация проигрывается бесконечно.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


    div {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}

7. Направление анимации

Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

animation-direction
Значения:
`alternate`	Анимация проигрывается с начала до конца, затем в обратном направлении.
`alternate-reverse`	Анимация проигрывается с конца до начала, затем в обратном направлении.
`normal`	Значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца.
`reverse`	Анимация проигрывается с конца.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


div {
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

animation-direction: alternate;

animation-direction: alternate-reverse;

animation-direction: normal;

animation-direction: reverse;

8.

Краткая запись анимации

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

9. Проигрывание анимации

Свойство позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект. Состояние :hover, например:

 h2:hover {animation-play-state: paused;}

Не наследуется.

animation-play-state
Значения:
`paused`	Останавливает анимацию.
`running`	Значение по умолчанию, означает проигрывание анимации.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


div:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

10. Состояние элемента до и после воспроизведения анимации

Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.

animation-fill-mode
Значения:
`none`	Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
`forwards`	Воспроизводит анимацию до последнего кадра по окончанию последнего повтора и не отматывает ее к первоначальному состоянию.
`backwards`	Возвращает состояние элемента после загрузки страницы к первому кадру, даже если установлена задержка `animation-delay`, и оставляет его там, пока не начнется анимация.
`both`	Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.
`inherit`	Наследует это свойство от родительского элемента.

Синтаксис


    div {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

11. Множественные анимации

Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:


    div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}

Поддержа браузерами

IE: 10.0

Firefox: 5.0 -moz-

Chrome: 4.0 -webkit-

Safari: 4.0 -webkit-

Opera: 12.0 -o-

iOS Safari: 7.1 -webkit-

Opera Mini: —

Android Browser: 4. 1 -webkit-

Chrome for Android: 44

24 креативных и уникальных примера CSS-анимации, которые вдохновят вас

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

Хотя существует несколько способов добавить анимированную графику на веб-страницу, одним из самых простых является использование анимации CSS, для которой не требуется ничего, кроме некоторых ноу-хау HTML и CSS.

Если вы хотите добавить анимацию CSS в свою работу, может быть полезно посмотреть на некоторые успешные примеры использования анимации CSS, прежде чем углубляться в нее. Это дополнительное исследование может вдохновить вас на ваши собственные проекты и дать представление о том, чего вы можете достичь с помощью эта мощная функция.

Вот почему мы собрали наши любимые примеры CSS-анимации из CodePen — онлайн-инструмента для создания фрагментов кода в HTML и CSS и обмена ими — чтобы помочь творческому потоку течь.

Но сначала краткий обзор темы…

Как работает анимация CSS?

Анимация CSS — это функция CSS, позволяющая анимировать изменение одного или нескольких свойств стиля элемента, а также управлять различными аспектами анимации. Чистая CSS-анимация не требует дополнительного кода (например, JavaScript) или мультимедиа (например, GIF-файлов) — все делается с помощью HTML и CSS.

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

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

Бесплатные шаблоны кода

Бесплатные шаблоны анимации CSS

Используйте эти бесплатные шаблоны анимации CSS на своем веб-сайте.

Для демонстрации приведем простой пример CSS-анимации:

См. пример CSS-анимации пера от Кристины Перриконе (@hubspot) на CodePen.

В этом примере

— это элемент, который мы анимируем. Глядя на CSS, мы видим, что наши объявления анимации связаны с селектором div . Самое важное объявление здесь — animation-name , которое связывает ключевой кадр my-animation с нашим элементом div . Ниже находятся несколько дополнительных объявлений, влияющих на время и поведение анимации.

Сама анимация создается с помощью ключевого кадра, указанного правилом @keyframes . Ключевой кадр определяет начальное состояние анимации (внутри от {} ) и ее конечное состояние (внутри до {} ). Ключевой кадр my-animation изменяет три свойства стиля нашего div: background-color , width и top . Когда эти три свойства анимируются одновременно, получается согласованная анимация.

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

Примеры CSS-анимации

Ниже мы собрали 24 примера CSS-анимации, начиная от базовых эффектов взаимодействия и заканчивая настоящими произведениями искусства (по крайней мере, по моему мнению). Не стесняйтесь использовать их для вдохновения в своих собственных проектах.

1. CSS Эффект перехода при наведении мыши

Начнем с того, что эта анимация показывает простой, но эффективный эффект выделения текста, запускаемый действием наведения мыши. Это отличный способ добавить изюминку ссылкам на ваши страницы.

См. эффект перехода Pen CSS при отсутствии мыши от Адама Аргайла (@argyleink) на CodePen.

Посмотреть код здесь.

2. Простые счетчики загрузки

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

См. Pen Simple HTML & SVG Loading Spinners Стивена Делани (@sdelaney) на CodePen.

Посмотреть код здесь.

3. Анимация прокрутки текста

Еще один отличный способ улучшить ваш текст. Этот фрагмент кода применяет эффект игрового автомата, который поворачивает слова в поле зрения и из него. Это обычная техника на веб-сайтах, которым необходимо передать универсальность своих творений. Является ли ваш продукт эффективным, удобным и устойчивым? Вставьте эти слова в анимацию, подобную этой.

См. анимацию Pen Text от Yoann (@yoannhel) на CodePen.

Посмотреть код здесь.

4. Анимированная кнопка «Отправить»

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

См. чистую CSS-анимацию кнопки отправки пера от Dead Pixel (@dead_pixel) на CodePen.

Посмотреть код здесь.

Посмотреть код здесь.

Последний пример

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

Однако мы не могли не добавить последний пример, который нас поразил. Этот пример «Сторожевой башни», вероятно, выходит за рамки этой статьи по своей сложности, но он также является свидетельством того, чего могут достичь только CSS и HTML.

См. анимацию Pen Watch Tower Pure CSS от Трэвиса Даути (@tdoughty) на CodePen.

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

95 Примеры CSS-анимации

Коллекция бесплатных HTML- и CSS-анимаций примеров кода из Codepen, Github и других ресурсов. Обновление июньской коллекции 2021 года. 18 новых предметов.

Библиотеки анимации CSS

Зависимости: animxyz. css

О коде

Анимация птиц

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Перемены настроения

Бесконечно зацикленная анимация в CSS.

Ноль div анимация с бесконечным масштабированием.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированный 3D-тостер CSS

Нажмите на тостер, чтобы приготовить булочки. Наведите курсор на края страницы, чтобы повернуть.

Переходы и анимация в сочетании с SVG.

Вдохновлен научно-фантастическим романом Лю Цысиня «Задача трех тел».

3D анимация бегущей страницы только на CSS.

Анимированная наклейка в HTML и CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация каменной руки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

h3O — Анимация химической колбы

Химическая колба

SVG слегка анимирована с помощью CSS.

Кассетная анимация CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Кофемашина Анимация

Кофемашина с чистой CSS анимацией.

Анимация точечного меню

Четыре различных анимации меню для кнопки меню переключаются между точками, крестиком и значком назад.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Цикл анимации

Циклическая анимация прокрутки увеличительного стекла.

Простой подключена анимация для модальных окон.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Адаптивная и анимированная ветряная мельница

Ветряная мельница (Мопс + SCSS) — отзывчивая и анимированная.

Недавно участвовал в проекте, где нужно было делать анимацию. Мы использовали After Effects > JSON > некоторые магические плагины, но мне было интересно, смогу ли я воспроизвести точно такой же эффект с помощью CSS. — Оливия

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: simple-line-icons.css, jquery.js

О коде

Только CSS Анимация границ

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Обруч Pure CSS Saturn

Титан часы Сатурн хулахуп! Преобразование этого gif в чистый CSS: https://dribbble.com/shots/4252236-Saturn-Hula-Hooping

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

UX в движении. Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Привлечь внимание анимации

Иногда вы хотите привлечь внимание к элементу на вашей странице. Некоторые из них тонкие. Некоторые из них не являются.

Псевдоэлемент, анимация и размытие фонового градиента.

Эта версия CSS3 отличается аппаратным ускорением, простотой и гораздо большей производительностью.

Анимированное пламя с использованием только анимации CSS3 и box-shadow .

Animation html: animation — CSS: Cascading Style Sheets

Онлайн-курс «Анимация для фронтендеров» — HTML Academy

Запишитесь на консультацию

Почему курс профессиональный

В чём отличие от тренажёров?

Как проходит

Что вас ждёт на обучении

Структурированная теория

Практика

Ревью кода и консультации

Подходит ли вам этот курс

Преимущества курса

Наставники — это опытные профессионалы, работающие в индустрии

Процесс отбора наставника

Процесс работы с наставником

Учебный проект

Личный проект

Отзывы компаний

Программа курса

Основы анимации

Анимация в CSS

SVG Анимация

Покадровая анимация. JavaScript и Canvas

WebGL. Шейдеры

Three.js часть 1: 3D в браузере

Three.js часть 2: Работа с камерой

Будущее анимации в браузере

Зарегистрироваться и оплатить

Запишитесь на консультацию

CSS учебник

1. Правило @keyframes

Синтаксис

2.

Синтаксис

3. Длительность анимации

Синтаксис

4.

Синтаксис

5. Анимация с задержкой

Синтаксис

Пример

6. Повтор анимации

Синтаксис

7. Направление анимации

Синтаксис

8.

9. Проигрывание анимации

Синтаксис

10. Состояние элемента до и после воспроизведения анимации

Синтаксис

11. Множественные анимации

Поддержа браузерами

24 креативных и уникальных примера CSS-анимации, которые вдохновят вас

Как работает анимация CSS?

Бесплатные шаблоны анимации CSS

Используйте эти бесплатные шаблоны анимации CSS на своем веб-сайте.

Примеры CSS-анимации

1. CSS Эффект перехода при наведении мыши

2. Простые счетчики загрузки

3. Анимация прокрутки текста

4. Анимированная кнопка «Отправить»

5. Логотип, реагирующий на наведение

6. Открытие конверта

7. Горячий кофе

8. Кофемашина

9. Кнопка покачивания

10. Pacman

11. Три точки Загрузка

12. Ящики для файлов

13. Цветовой веер

14. Трехмерный тумблер

15. Подводная лодка

16. Анимированный текст заголовка при наведении курсора

17. Плавающее изображение

18. Астронавт

19. Minimal Cat

20. Растущие/сокращающиеся стержни

21. Лазертаг

22. Свечи

23. Speedy Truck