Animate css примеры: Набор анимаций animate.css

Анимация Animations CSS уроки для начинающих академия

❮ Назад Дальше ❯

Анимация CSS

CSS анимация позволяет анимацию большинства HTML элементов без использования JavaScript или Flash!

CSS

Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Что такое анимация CSS?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

Вы можете изменить любое количество свойств CSS, сколько угодно раз.

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

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

Правило @keyframes

При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

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

В следующем примере анимация «example» привязывается к элементу <div>. Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от «Red» на «желтый»:

Пример

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения.

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.

В следующем примере изменяется цвет фона элемента < div > при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

В следующем примере изменяется как цвет фона, так и положение элемента <div> при завершении анимации на 25%, завершении 50% и снова при завершении анимации 100%:

Пример

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Задержка анимации

Свойство animation-delay указывает задержку начала анимации.

Следующий пример имеет задержку в 2 секунды перед началом анимации:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

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

В следующем примере анимация начнется, как если бы она уже играла в течение 2 секунд:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;

Установить, сколько раз анимация должна выполняться

Свойство animation-iteration-count указывает, сколько раз должна выполняться анимация.

В следующем примере анимация будет выполняться 3 раза, прежде чем она остановится:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

В следующем примере используется значение «Infinite» для того, чтобы анимация продолжалась навсегда:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;

Запуск анимации в обратном направлении или альтернативные циклы

Свойство animation-direction указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах.

Свойство «направление анимации» может иметь следующие значения:

• normal — Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
• reverse — Анимация воспроизводится в обратном направлении (назад)
• alternate — Анимация сначала разыгрывается вперед, затем назад
• alternate-reverse — Анимация сначала воспроизводится назад, а затем пересылается

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

В следующем примере используется значение «альтернативный», чтобы сначала запустить анимацию вперед, а затем назад:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;

В следующем примере используется значение «альтернативный-обратный» для того, чтобы анимация сначала пробежала назад, а затем пересылает:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}

Укажите кривую скорости анимации

Свойство animation-timing-function определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

• ease — Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
• linear — Задает анимацию с одинаковой скоростью от начала до конца
• ease-in — Задает анимацию с медленным запуском
• ease-out — Задает анимацию с медленным концом
• ease-in-out — Задает анимацию с медленным началом и концом
• cubic-bezier(n,n,n,n) — Позволяет определить собственные значения в функции кубической Безье

Пример

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Задание режима заливки для анимации

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство «анимация-режим заполнения» может переопределить это поведение.

Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).

Свойство «анимация-режим заполнения» может иметь следующие значения:

• none — Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
• forwards — Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
• backwards — Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
• both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях

Следующий пример позволяет элементу <div> сохранять значения стиля из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации (во время периода задержки анимации):

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации, и сохранить значения стилей из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}

Анимация Сокращенное свойство

В приведенном ниже примере используются шесть свойств анимации:

Пример

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:

Пример

div {
    animation: example 5s linear 2s infinite alternate;
}

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

В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:

❮ Назад Дальше ❯

ReactJS и CSS анимация: инструкция к применению

Оглавление

Перед каждой современной IT-компанией рано или поздно возникает задача анимации страниц. На дворе 21 век и по-другому никак. В зависимости от степени тривиальности задачи, мы всегда стараемся найти библиотеку (или решение), предоставляющую максимальный спектр возможностей.

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

Далее мы рассмотрим основные технологии создания анимации, выделим их ключевые особенности и приведем примеры использования.

1. CSS анимация

CSS transitions

Его основное отличие от классического CSS animations состоит в том, что он применяется для переходов. То есть анимируется один раз. Что это значит?

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

Вообще возможность связывать анимации с использованием CSS transition можно посредством обработчика на событие transitionend. Но мы этого делать не рекомендуем, так как keyframes (css animation) намного проще в использовании.

Через transition-property мы указываем, какое свойство будет анимироваться. В нашем случае это background-color.

Далее transition-duration указывает на продолжительность анимации (3 секунды).

Теперь любое изменение фонового цвета у этого класса будет анимироваться в течение 3 секунд. Также заметим, что через ключевое слово transition можно указать через пробел все параметры по порядку. Их мы рассмотрим ниже.

Transition-property — здесь можно указать почти любое CSS свойство, например, margin-left, padding-right, opacity и т. д.

Transition-duration — продолжительность анимации, задается в s (секундах) или ms (миллисекундах).

Transition-delay — время задержки анимации.

Transition-timing-function — временнáя функция, определяющая как процесс анимации будет распределен во времени. Например, будет ли она постепенно ускоряться или замедляться. Самые популярные параметры: ease, ease-in, ease-out, ease-in-out. Также упомянем функцию steps (количество шагов[, start/end]), которая разбивает нашу анимацию на четкое количество шагов. Она используется в основном для исключения плавных переходов (пример: счетчик чисел).

Пример:

CSS animation

Заканчиваем с простыми анимациями и переходим к технологии CSS animation. Что она собой представляет и в чем ее отличия?

Сложные анимации создаются объединением простых с помощью CSS-правила @keyframes. В нем мы задаем «имя» анимации и правила: что, откуда и куда анимировать. Правило @keyframes содержит имя элемента, связывающее его с блоком объявления элемента. Keyframes кадры создаются с помощью ключевых слов “from” и “to” (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов. Их количество не ограничено: задавайте сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

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

Затем при помощи свойства animation: эта анимация подключается к элементу: задаются ее имя, время, дополнительные параметры и способ их применения.

Пример:

— (1) Имя анимации. Тут мы можем указать любое имя, соответствующее нашему имени в @keyframes. По сути оно будет обращаться туда. В приведенном примере мы указали все параметры в одну строчку. Для уточнения добавим: последний alternate указывает на то, что каждый раз анимация будет менять свое направление.

— (2) В @keyframes блоке мы указываем способ анимации. В данном случаем это будет смещение на определенное число пикселей.

Animate.css

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

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

Для ее применения к элементу (разумеется, после установки), должны быть добавлены два класса: animated и любой другой на выбор — именно он определяет какую анимацию мы используем. На JQuery это будет выглядеть примерно так:

Если вы хотите заточить анимацию “под себя”, можно настроить и другие параметры (время исполнения, задержка и т.д.).

Пример:

2. React анимация

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

Чем же она оказалась полезной? Ответим на этот вопрос небольшим обзором двух API для анимации.

ReactCSSTransitionGroup

Небольшой пример, как это выглядит:

Как видите, ReactCSSTransitionGroup оборачивает элемент, который мы собрались анимировать. В transitionName мы присваиваем имя нашей анимации.

Примечание! Распространенная ошибка: выносить ReactCSSTransitionGroup не в рендер самого компонента, а в отдельную функцию. Так оно не работает!

Пример:

Мы можем отлавливать жизненное состояние нашей анимации даже в стилях. Имеется в виду отслеживание того, на каком этапе она находится.

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

Далее (2) мы задаем начальное состояние для момента: когда элемент будет удален из DOM дерева и как именно будут меняться его стили перед удалением.

ReactTransitionGroup

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

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

componentWillAppear() — вызывается в том же время, что и componentDidMount(), при этом блокируя остальные анимации. Выполняется только при первичном рендере TransitionGroup.

componentDidAppear() — вызывается сразу после отработки componentWillAppear(). Вызов происходит с помощью callback функции, переданной в вызванный componentWillAppear().

componentWillEnter() — срабатывает в том же время, что и componentDidMount(), похожа на componentWillAppear(), но в отличии от него не вызывается при первичном рендере элемента.

componentDidEnter() — вызывается сразу после отработки componentWillEnter().

componentWillLeave() — вызывается в тот момент, когда элемент был удален из ReactTransitionGroup. Но он все еще будет виден, так как ReactTransitionGroup придержит его до вызова callback.

componentDidLeave() — вызов происходит сразу после отработки callback функции componentWillLeave(). Срабатывает в то же время, что и componentWillUnmount().

Предлагаем ознакомиться с примером, реализованном на одном из наших проектов.

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

Пока все просто: мы оборачиваем в TransitionGroup то, что анимируется. Чтобы это дало свой эффект и TransitionGroup мог отловить момент, когда наш child элемент появился или исчез из DOM дерева, нам следует поставить флаг (2) isOpenedMenuItemWorks.

Далее посмотрим на манипуляции, которые происходят в самом анимируемом компоненте FadeUpContainer.

Пример показывает, что все child компоненты, находящиеся внутри TransitionGroup, получают в свое пользование методы жизненного цикла для анимации. В данном случае методы componentWillEnter() и componentWillLeave().

В приведенном примере мы использовали библиотеку для анимации gsap. Очень рекомендуем ознакомиться с ее документацией. Эта библиотека позволяет решить массу проблем, связанных с анимацией. Главная особенность ее использования в том, что мы должны дать функции (здесь TweenMax) ссылку на анимируемый элемент.

Догадаться, какие параметры в функции TweenMax и за что отвечают совсем нетрудно. El ссылка на элемент, время исполнения, начальное состояние, конечное состояние + callback + время задержки.

3. Продвинутое использование библиотек для анимации при скроллинге

В этой части статьи мы расскажем о библиотеках, с которыми приходилось сталкиваться на практике. На сегодня — это WOW.js и AOS animate.

Между ними нет существенной концептуальной разницы. Обе анимируют при скроллинге. Обе используют для анимации готовые классы animate css. Но все же имеется и одно принципиальное отличие. В AOS можно определить свои классы для анимации, тогда как WOW использует только готовые animate.css классы. Именно поэтому мы решили сконцентрироваться на AOS  (в использовании WOW на него  очень похож).

Для того чтобы AOS заработал, его надо добавить глобально.

Пример:

В принципе все. Можно смело использовать.

А вот еще одна задача: анимация счетчика чисел в определенной части страницы при скроллинге.

В заключение отметим, современные технологии предлагают широкий спектр решений для реализации анимаций. Остается лишь подобрать оптимальный вариант под поставленную задачу. Если вам нужна высокая производительность и максимальная гибкость, при отсутствии сложных требований — используйте CSS анимации. В случае сложных требований лучшим выбором станут javascript-based анимации. С ними вы можете реализовать практически любую задачу. Причем, с легкостью и без заметных потерь в производительности.

Если вам понравилась статья, не забудьте поделиться ею в социальных сетях. Всем хорошего дня!

Как использовать анимацию css учебник с примерами

В этой статье я хочу показать вам, как использовать библиотеку animate.css.

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

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

Именно так я нашел библиотеку Animate.css и с самого начала решил, что это то, что мне нужно. Лично я считаю, что многим фронтенд-разработчикам очень нравится эта библиотека, так как она позволяет нам сделать пользовательский интерфейс действительно потрясающим.

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

П.С. Если вы тот, кто предпочитает смотреть, а не читать, присоединяйтесь к нам на нашем канале YouTube, где мы публикуем все наши уроки в виде видео.

Начнем!

1. Что такое библиотека animation.css?

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

Вы можете настроить выбранные анимации, установив задержку и скорость эффекта. Можно использовать анимацию с чистыми проектами HTML и CSS, но вы также можете реализовать Javascript.

2. Установка

Есть два способа начать использовать библиотеку Animate.css. Если вы используете npm или yarn, достаточно установить их с помощью одной из следующих команд:

$ npm установить animate.css – сохранить

 <голова>
  
 

 <голова>
  
 

 ч2 {
  продолжительность анимации: 2 с;
  анимация-задержка: 1с;
  количество итераций анимации: 5;
}