Эффекты анимации границы в css. Использование CSS-анимации
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Введение в CSS-анимацию
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44
1. Правило @keyframes
Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.
После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:
H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).
2. Название анимации animation-name
Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется.
Синтаксис
Div {animation-name: mymove;}
3. Продолжительность анимации animation-duration
Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Синтаксис
Div {animation-duration: 2s;}
4. Временная функция animation-timing-function
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье 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. вы сможете построить любую траекторию скорости изменения анимации. |
| step-start | Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start) . |
| step-end | Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end) . |
| steps(количество шагов,start|end) | Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div {animation-timing-function: linear;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Анимация с задержкой animation-delay
Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.
Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.
Синтаксис
Div {animation-delay: 2s;}
6. Повтор анимации animation-iteration-count
Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.
Синтаксис
Div {animation-iteration-count: 3;}
7. Направление анимации animation-direction
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
Синтаксис
Div {animation-direction: alternate;}
8. Краткая запись анимации
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
9. Проигрывание анимации animation-play-state
Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется.
Синтаксис
Div:hover {animation-play-state: paused;}
10. Состояние элемента до и после воспроизведения анимации animation-fill-mode
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.
| animation-fill-mode | |
|---|---|
| Значения: | |
| none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
| forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
| backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимации
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
- animation-name — уникальное имя анимации (ключевых кадров, о них поговорим чуть ниже).
- animation-duration — длительность анимации в секундах.
- animation-timing-function — кривая изменения скорости анимации. На первый взгляд очень непонятно. Всегда легче показать на примере, а их Вы увидите ниже. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
- animation-delay — задержка в секундах перед началом анимации.
- animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
2. Реальный пример анимации CSS3
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера:
пусть у нас какой-нибудь блок Вроде бы всё понятно — просто нужно сжать блок Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице. А вот что находится в файле стилей: Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически. Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал. Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше. 3 урока по анимации CSS (преобразования) Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS.
Это экспериментальная технология
CSS анимации позволяют анимировать переходы от одних конфигурации CSS стилей к другим.
CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключей, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей. Есть три преимущества CSS-анимации перед традиционными способами: В стиле для элемента определяет собой абзац текста."> с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с, и что имя для @keyframes , описывающей саму анимацию, определено как "slidein". В элемент определяет собой абзац текста."> можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации. Ключи определяются с помощью правила @keyframes . В данном случае мы имеем только два ключа. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок определяет собой абзац текста."> находится за пределами правого края окна браузера. Второй ключ (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит будто заголовок определяет собой абзац текста."> приплывает к левому краю окна браузера. Давайте добавим другие ключи в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению. Это легко реализовать с помощью следующего ключа: 75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
}
The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice. Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%. (Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen) Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и придать ему значение, равное нужному количеству повторений анимаций. В данном случае давайте установим значение infinite для бесконечного повторения: P {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice. Итак, мы настроили повторение, Но есть кое-что странное. Текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству значения alternate: P {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice. Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье: P {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction:alternate;
}
можно заменить на: P {
animation: 3s infinite alternate slidein;
}
CSS cвойство анимации может иметь несколько значений, разделенных запятыми, это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений, и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу: В первом примере, у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений - по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений: Animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5s и количество повторений 2, и т.д. Animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px - 5s. Значения продолжительности закончились, теперь они берутся сначала - bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом. Animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации
. Эти события, представленные объектом AnimationEvent , можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие. Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть как она работает. Начнем с добавления CSS. Анимация будет длиться 3 с., будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction
установлено alternate
. В ключах @keyframes установлены такие значения ширины и левого отступ, что элемент будет скользить по экрану. Slidein {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
animation-name: slidein;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа. Var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
e.className = "slidein";
Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее что делает этот код это установка класса "slidein" для анимируемого элемента; мы делаем это чтобы запустить анимацию. Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше чем исполняется наш сценарий. Так мы сможем контролировать начало анимации сами посредством вставки класса "slidein" для анимируемого элемента. События будут передаваться функции listener() , показанной ниже. Function listener(e) {
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события и добавляет элемент Вывод, когда анимация закончится, будет выглядеть как-то так: Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадют. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend . Ради полноты картины приведем HTML. В разметке имеется тег ul
в который и выводится вся информация:
This example shows how to use CSS animations to make In addition, we output some text each time an animation event fires, so you can see them in action. ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье. Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в css реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом: Создаются сами эффекты переходов с помощью @keyframes Нужному элементу задается эта самая анимация, а также ее параметры (все это с помощью свойств и их значений). Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать. Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл): @keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}}
100%{font-size: 50px;}} @
keyframes
pulse
{
0
%
{
font
-
size
:
50px
;
}
50
%
{
font
-
size
:
60px
;
}
}
Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила. Проценты, это так называемые временные отметки, на которых к элементу будут добавляться указанные свойства. В нашем случае записанное означает следующее: в самом начале выполнения размер шрифта будет составлять 50 пикселей, в ее середине он увеличиться до 60-ти, а в конце опять уменьшиться до начального размера. Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения. Пока у нас просто код, который формирует анимационный эффект, но он нигде не применяется. Если вы обновите вашу веб-страницу, на ней ничего не изменится. Соответственно, чтобы применить анимацию, нужно выполнить два действия: Выбрать элемент, для которого она будет применяться Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо. В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу. Есть два обязательных свойства, которые нужно указать в таком случае, чтобы все заработало. Во-первых, это имя, которое мы писали в keyframes. Во-вторых, это длительность анимации, потому что без этого параметра браузер просто не сможет ее воспроизвести. Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые: animation-name: pulse;
animation-duration: 2s; Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число. Реализуется очень легко с помощью этого же свойства. На самом деле вы можете просто задеть количество повторений в пару тысяч, этого вполне хватит, но теоретически наша анимация не будет повторяться бесконечно. animation-iteration-count: infinite; animation
-
iteration
-
count
:
infinite
;
Все, теперь мы сделали бесконечный повтор. Проверять так ли это, просидев всю жизнь за монитором, я не советую. Просто это применяется в тех случаях, когда вы хотите, чтобы эффект постоянно повторялся и не исчезал. Если он ненавязчивый и не отвлекает пользователя, то почему бы и нет. По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах. Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр. @keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}
70%{font-size: 80px;}
100%{font-size: 50px;}} @
keyframes
pulse
{
0
%
{
font
-
size
:
50px
;
}
50
%
{
font
-
size
:
60px
;
}
70
%
{
font
-
size
:
80px
;
}
100
%
{
font
-
size
:
50px
;
}
}
Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение. Рис. 2. Исходный размер текста
Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.
Теперь задаем: animation-direction: reverse; animation
-
direction
:
reverse
;
Все перевернулось наоборот. Сначала текст увеличиться аж на 30 пикселей, до 80-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто. А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие.
24.08.2017 Одни из лучших примеров CSS3 анимации.
Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты. One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить. Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю. Взаимодействие сочетается с повествованием, чтобы придать завораживающий и новый опыт. Также важна смелость и упорство Перейры и Реппонена, которые вели этот само-финансируемый проект в течение двух лет: “Это позволяет нам эксперементировать с дисциплинами и техниками, для которых обычно нет места в клиентских проектах”
, – говорит Перейра. Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью. “Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood). Команда подчеркивает важность того, чтобы дизайнеры хорошо разбирались в типографике. Для тех, кто впервые изучает правила, или для опытных дизайнеров, нуждающихся в переподготовке, этот чит-лист является одновременно учебным и приятным для изучения. Контент сфокусирован, информация понятна, а CSS анимация гладкая и плавная. Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики. Все воплощается в жизнь, сохраняя при этом производительность и доступность. Они добавили горячие клавиши, чтобы сделать опыт использования лучше для всех людей. Отвечая на вопрос о своем недавно выпущенном портфолио, Водняк пояснил, что взаимодейсвие было ключевым моментом: «Интернет становится все более и более креативным, и становится необходимым образовывать творческий дуэт между разработчиком и дизайнером. Разработчикам всегда нужны новые испытания, а Дизайнеры нуждаются в решениях, чтобы сделать их идеи возможными ». Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов. Эту таблицу можно крутить в разных направлениях с помощью мышки. Также можно изменить форму таблицы внизу страницы. Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js , чтобы перенести эффекты из демо в игровой движок famo.us .
Все мы знаем, что работа в дизайн индустрии иногда может стать монотонной, так что оторвитесь от своего расписания и повеселитесь с этим милым маленьким CSS проектом. CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд! Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует. Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте. GT-America назван в честь страны, в которой черпал вдохновение, - Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта. Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами! Обычно сайты публичных услуг не отличаются красотой и удобством, но сайт бибилиотеки Гринвича – исключение из правил. Дизайн этого сайта является результатом двух лет исследований, тестирования и разработки. Наш самый любимый момент – это иллюзия отрисовки элементов при прокрутке. Обычно этот трюк создается с помощью SVG, но в данном случае использовались обычные CSS анимации и расслоение элементов, которые выглядят даже интереснее сложной SVG графики. Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно:
работает только в Google Chrome. 1
<div
class
=
"toSmallWidth"
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth
{
margin
:
20px
auto
;
/*внешние отступы сверху и снизу по 20px и выравнивание по середине*/
background
:
red
;
/*красный фон у блока*/
height
:
100px
;
/*высота блока 100px*/
width
:
800px
;
/*начальная ширина 800px*/
-webkit-animation-name
:
animWidthSitehere;
-webkit-animation-duration
:
5s;
/* свойство с префиксом для браузеров Chrome, Safari, Opera */
animation-name
:
animWidthSitehere;
/* указываем название ключевых кадров (находятся ниже)*/
animation-duration
:
5s;
/*задаем длительность анимации*/
}
/* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitehere {
from {
width
:
800px
;
}
to {
width
:
100px
;
}
}
@keyframes animWidthSitehere {
from {
width
:
800px
;
}
/*первый ключевой кадр, где ширина блока 800px*/
to {
width
:
100px
;
}
/*последний ключевой кадр, где ширина блока 100px*/
}
3. Примеры анимации CSS3 посложнее
Так как спецификация этой технологии ещё не стабилизировалась, смотрите по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.Конфигурирование анимации
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Добавление других ключевых слов
Настройка повторения
Движение текста вправо и влево
Использование шорткодов
Установка нескольких значений свойствам анимации
Использование событий анимации
Добавление CSS
Добавление обработчика событии анимации
Регистрация событий
чтобы залогировать произошедшее событие.
HTML
Watch me move
p elements
move across the page.Основы создания
Синтаксис @keyframes
Применяем анимацию в действии
Пробуем
Бесконечная анимация в css3
Задержка перед началом
Направление
Форма анимации
01. One Shared House
02. Type Terms
03. Waaark
04. Periodic table
05. CSS Creatures
06. AT-AT Walker from Star Wars
07. GT America
08. Caaaaaaaat
09. Greenwich Library
10. Interactive album covers
