Примеры css3 animation: CSS3-анимация (свойство animation) – CSS3 анимация при наведении: 9 примеров

Содержание

Полезные ссылки для изучения CSS анимации / Habr

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.


CSS Анимация (CSS3 Animations)

Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.

Синтаксис покадровой анимации (Keyframe Animation Syntax)

Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.

CSS3 Анимация (CSS3 Animations)

Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.

CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)

Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.

Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)

Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.

Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)

Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.

Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)

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

Развлекаемся с CSS анимацией (Having Fun with CSS Animations)

Самули Хакониеми (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.

Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)

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

Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)

И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.

CSS3 Анимация: 10 Впечатляющих примеров

Одни из лучших примеров CSS3 анимации. 

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

01. One Shared House

css3 анимация пример

One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить.

Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю.

Взаимодействие сочетается с повествованием, чтобы придать завораживающий и новый опыт. Также важна смелость и упорство Перейры и Реппонена, которые вели этот само-финансируемый проект в течение двух лет: “Это позволяет нам эксперементировать с дисциплинами и техниками, для которых обычно нет места в клиентских проектах”, – говорит Перейра.

02. Type Terms

css анимация пример

Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью.

“Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood).

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

03. Waaark

css анимация

Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики.

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

Отвечая на вопрос о своем недавно выпущенном портфолио, Водняк пояснил, что взаимодейсвие было ключевым моментом: «Интернет становится все более и более креативным, и становится необходимым образовывать творческий дуэт между разработчиком и дизайнером. Разработчикам всегда нужны новые испытания, а Дизайнеры нуждаются в решениях, чтобы сделать их идеи возможными ».

04. Periodic table

css анимация

Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов.

Эту таблицу можно крутить в разных направлениях с помощью мышки. Также можно изменить форму таблицы внизу страницы.

Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js, чтобы перенести эффекты из демо в игровой движок famo.us.

Кабелло также опубликовал видео, демонстрирующее работу демо на iPad 2:

05. CSS Creatures

css3 анимация

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

CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд!

06. AT-AT Walker from Star Wars

css анимация

Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует.

07. GT America

css3 анимация

Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте.

GT-America назван в честь страны, в которой черпал вдохновение, — Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта.

08. Caaaaaaaat

css анимация пример

Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами!

09. Greenwich Library

css3 анимация

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

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

10. Interactive album covers

css3 анимация

Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно: работает только в Google Chrome.


Читайте также: 


Перевод статьи 10 impressive examples of CSS3 animation

Авторы оригинального текста: Aaron Kitney, Claudina Sarahe, Creative Bloq Staff

СSS3 Анимация



CSS3 Анимации

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

CSS3


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

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

Номер, за которыми следуют -webkit-,-moz-, или -o- указывает первую версию, которая работает с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

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

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

Вы можете изменить, много свойств CSS, которые вы хотите изменить, много раз, сколько вы хотите.

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

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


Правило @keyframes

При указании стилей CSS3 внутри правила

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

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

Следующий пример связывает "example" анимацию с элементом <div>. Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> с "red" на "yellow":

Пример

/* Код анимации */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Элемент, к которому применяется анимация */
div {
    width: 100px;
    height: 100px;
    background-color: red;
   animation-name: example;
    animation-duration: 4s;
}

Редактор кода »

Примечание: Свойство animation-duration определяет, сколько времени должна занимать анимация. Если свойство animation-duration не указано, анимации не будет, потому что значение по умолчанию - 0s (0 секунд).

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

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

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

Пример

/* Код анимации */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Элемент, к которому применяется анимация */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Редактор кода »

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

Пример

/* Код анимации */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* 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-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Редактор кода »

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

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

Свойство 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;
}

Редактор кода »

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

Пример

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

Редактор кода »

Следующий пример использует значение alternate-reverse, чтобы сделать анимацию сначала движение назад, затем вперед:

Пример

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 определяет движение скорости анимации.

свойство animation-timing-function может иметь следующие значения:

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

В следующем примере показаны некоторые из различных движений скорости, которые можно использовать:

Пример

#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;}

Редактор кода »

Указать режим заливки анимации

CSS3 анимации не влияют на элемент до первого кадра движения или после последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

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

Свойство animation-fill-mode может иметь следующие значения:

  • none - Значение по умолчанию. Анимации не будет применять любые стили к элементу до или после его выполнения
  • 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;
}

Редактор кода »

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

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

Пример

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

Редактор кода »

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


Проверьте себя с помощью упражнений!


Свойства CSS3 Анимации

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

Свойство Описание
@keyframes Задает код анимации
animation Сокращенное свойство для установки всех свойств анимации
animation-delay Задает задержку запуска анимации
animation-direction Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах
animation-duration Определяет, сколько времени анимация должна занять для завершения одного цикла
animation-fill-mode Задает стиль для элемента, когда анимация не воспроизводится (с начала, после окончания или оба)
animation-iteration-count Указывает, сколько раз анимация должна воспроизводиться
animation-name Задает имя анимации @keyframes
animation-play-state Указывает, запущена или приостановлена анимация
animation-timing-function Задает скорость движения анимации

СSS3 Свойство animation


Пример

Привязка анимации к элементу <div>, используя свойство стенографии:

div {
  animation: mymove 5s infinite;
}

Попробовать »

Определение и использование

Свойство animation сокращенное свойство для:

Примечание: Всегда указывайте свойство animation-duration, в противном случае длительность равна 0, и никогда не будет воспроизводиться.

Значение по умолчанию: нет 0 удобство 0 1 нормально не работает
Унаследованный: нет
Анимируемый: нет. Читайте об animatable
Версия: CSS3
JavaScript синтаксис: object.style.animation="mymove 5s infinite" Попробовать

Поддержка браузеров

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

Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работает с префиксом.

Свойство
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-


CSS синтаксис

animation: имя длительности - timing-function, задержка - iteration-count, направление - fill-mode, play-state;

Значение свойств

Значение Описание
animation-name Задает имя ключевого кадра, который требуется привязать к селектору
animation-duration Указывает, сколько секунд или миллисекунд требуется для завершения анимации
animation-timing-function Задает линию скорости анимации
animation-delay Задает задержку перед запуском анимации
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация
animation-direction Указывает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах
animation-fill-mode Указывает, какие значения применяются анимацией вне времени ее выполнения
animation-play-state Указывает, выполняется ли анимация или приостановлена
initial Устанавливает для этого свойства значение по умолчанию. Читайте об initial
inherit Наследует это свойство от родительского элемента. Читайте об inherit

Связанные сраницы

CSS учебник: CSS Анимации

HTML DOM справочник: Свойство animation


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *