Чем ближе мы приближаемся к началу работы интерфейса, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно - открывая банку газировки или закрывая глаза перед сном мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в веб.
В своей статье поделюсь знаниями о анимации CSS и как с ней работать. Анимация придаёт сайтам динамичность и улучшает понимание их возможностей. Она оживляет веб-страницы и помогает взаимодействовать с пользователем. В отличие от переходов CSS3, анимация CSS базируется на ключевых кадрах. Которые позволяют воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла автоматически.
Анимация - это набор ключевых кадров или кейфреймов хранящихся в CSS:
@keyframes animation-test { 0% { width: 100px; } 100% { width: 200px; } }
Давайте разберём, что здесь происходит. Ключевое слово @keyframes
обозначает саму анимацию. Затем идет имя анимации, в нашем случае - animation-test
. В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to).
Взгляните на код ниже. Анимацию можно задать и таким образом:
@keyframes animation-test { from { width: 0; } 25% { width: 75px; } 75% { width: 150px; } to { width: 100%; } }
Помните, если начальный или конечный кадры не указаны, браузер определит их автоматически, будто к ним не была применена анимация.
Подключить анимацию к элементу можно так:
Element-selector { animation-name: your-animation-name; animation-duration: 2.5s; }
Свойство animation-name
задаёт имя для анимации @keyframes
. Правило animation-duration
задаёт длительность анимации в секундах (1s, 30s, .5s) или миллисекундах (600ms, 2500ms).
Так же можно группировать кейфреймы:
@keyframes animation-test { 0%, 35% { width: 50px; } 75% { width: 200px; } 100% { width: 100%; } }
К одному элементу (селектору) можно применить по несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:
Element-selector { animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; }
Задержка анимации:
Свойство animation-delay
задает задержку перед воспроизведением анимации в секундах или миллисекундах:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* перед запуском анимации пройдет 2 секунды */ }
Повторное воспроизведение анимации:
Используя animation-iteration-count
мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* анимация воспроизводится 5 раз */ }
Состояние элемента до и после анимации:
При помощи свойства animation-fill-mode возможно указывать, в каком состоянии элемент будет находиться до начала анимации и после завершения:
animation-fill-mode: forwards; - элемент анимации будет находиться в состоянии последнего кейфрейма после завершения/воспроизведения;
a nimation-fill-mode: backwards; - элемент будет находиться в состоянии первого кейфрейма;
animation-fill-mode: both; - перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения - в состоянии последнего.
Запуск и остановка анимации:
За это отвечает свойство animation-play-state , которое может принимать два значения: running или paused .
Element-selector:hover { animation-play-state: paused; }
Направление анимации:
Свойство animation-direction, указывает на то, как управлять направлением воспроизведения анимации. Вот возможные значения:
animation-direction: normal; - анимация воспроизводится в прямом порядке;
animation-direction: reverse; - анимация воспроизводится в обратном порядке, от to к from;
animation-direction: alternate; - чётные повторы анимации воспроизводятся в обратном порядке, нечётные - в прямом;
animation-direction: alternate-reverse ; - нечётные повторы анимации воспроизводятся в обратном порядке, чётные - в прямом.
Функция плавности вывода анимированных кадров:
Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. По умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас у нас существуют следующие предопределенные значения: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.
Однако вы можете создавать такие функции самостоятельно. Значение animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y)
; принимает на вход 4 аргумента и строит кривую распределения процесса анимации.
Изучить подробнее или опробовать создание этих функций можно на сайте
http://cubic-bezier.com
И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps
которая принимает на вход количество шагов и направление (start или end
). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:
Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); }
Поддержка браузеров для анимации:
Значения в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Значения с -webkit-, -moz- или -O- указывает первую версию, которая работала с префиксом.
На сайте
https://www.w3schools.com
можно подробней изучить CSS анимацаию (с примерами).
Одна из популярных библиотек для работы с анимациями -
animate.css
.
Может показаться, что трудности с которым сталкиваешься при работе с CSS анимациями не оправданы. Но это совершенно не так.
Во-первых, CSS это мощный инструмент улучшения взаимодействия интерфейса с пользователем. Он не сильно влияет на производительность юзеров. В отличии от JavaScript аналогов. Технология, за счет использования вычислительных мощностей GPU, дает возможность браузерам быстрее оптимизировать скорость отрисовки элементов.
Во-вторых, гибкость, скоростью и простота внедрения CSS анимаций поможет “вдохнуть жизнь” в существующие или новые интерфейсы. Разработав общие и оригинальные подходы, разобравшись в особенности технологии можно делать уникальные юзабилити интерфейсы почти для всех проектов.
Надеюсь, в статье вы нашли полезную информацию для себя. Всем красивых сайтов. Не забывайте про анимашки:)
Практика разработки веб-ресурсов обусловила две существенные тенденции: скорость и представление о качестве. Первое обязывает разработчика делать свою работу быстро, второе - определяет границы целесообразного.
Посетитель преследует конкретную цель при посещении сайта и ориентируется на общепризнанные представления о том, где что находится и как оно должно работать. Разработчик может делать свою работу как ему это удобно, но если он заинтересован привлечь внимание большего числа посетителей, то не учитывать их мнение нецелесообразно.
Синтаксис и семантика анимации
Свойство CSS animation является простым в применении и позволяет быстро выполнить интересные эффекты. Для того чтобы элементы веб-страницы вели себя современно, как ожидает того посетитель, совершенно необязательно проявлять особую смекалку и проектировать собственные варианты анимации. Все работает по определению, как ожидаемо и востребовано.
В данном примере описаны два элемента. Первый представляет собой полоску-индикатор, которая движется вправо и пропорционально увеличивается в размере. Второй элемент - картинка, которая просто перемещается вправо.
Здесь показаны не все кадры. Свойство в данном случае реализовано плавно. Посетитель страницы наблюдает плавное перемещение с увеличением в объеме строки и движение картинки. Используя различные варианты перемещения вместо типа ease-in-out, можно управлять движением. Вариант ease-in-out дает ускорение в начале и торможение в конце, но можно выбрать и другой вариант движения.
Наложение и взаимодействие элементов
Все элементы, которые имеют свойство animation, CSS рассматривает независимо друг от друга и от общего потока страницы. Если элементы наложены друг на друга, то получается совмещение эффектов и в результате новый эффект.
Если в процессе анимации элементы меняют свойство то за счет законов наложения цветов можно получить весьма оригинальные эффекты всего двумя - тремя элементами.
Рисунок элемента имеет большое значение. В приведенном примере полоска формируется из картинки, в которой две линии разного цвета. При увеличении размера полоски - это пила, при движении пилы - это движущаяся волна. Манипулируя линиями и их наклоном, можно формировать эффекты по общим законам графики.
Изменение времени анимации также приводит к нестандартным решениям. Использование свойства трансформации, например функции вращения элемента, формирует оригинальные изменения. Пример:
Здесь полоска непрерывно меняет свой облик из непрозрачного состояния в прозрачное. Нижняя картинка при этом меняет только форму.
Анимация информации
В CSS: text animation имеет особый смысл. Текст всегда имеет значение и присутствует на веб-странице с конкретной целью. Но текст всегда менее информативен, чем изображение, а занимает много места.
Гарантия, что правильно написанный текст будет адекватно воспринят посетителем значительно более высока, чем надежда на правильное понимание изображения, особенно когда у дизайнера сайта есть собственное представление о формах выражения смысла.
Если раньше, когда CSS animation только пришла в мир верстки, были популярны бегущие строки, мигающие часы, пульсирующие тексты, то в современном сайтостроении считается нормальным принцип: не раздражая посетителя, максимально эффектно представить функциональность веб-ресурса.
В этом контексте любой из приведенных выше примеров удобен для представления текстовой информации, но вариант применения CSS как 3D animation является самым практичным.
Здесь в «нормальном» состоянии текст занимает мало места. Можно выделить главное слово или обозначить смысл. Как только мышка попадает на область текста, он разворачивается из CSS 3D animation в нормальное читабельное состояние.
Вариант экономии места в сочетании с 3D дизайном позволяет компактно размещать информацию. Освободившееся место можно использовать для других или смежных целей. За счет CSS animation нужная информация будет доступна в нужный момент времени.
Потребительский вариант анимации
Заметные успехи в создании качественных веб-ресурсов до сих пор оставляют за пределами рассмотрения один странно поставленный вопрос: почему дизайн сайта - забота разработчика?
Сайт - это не художественное произведение и не результат творческого процесса для целей эстетического характера. Сайт - это прежде всего функциональность, которая, по мнению владельца (разработчика), приведет к нему новых посетителей и даст возможность работать со своими клиентами.
Продать товар, оказать услугу, выполнить ту или иную работу... Посетитель приходит за товарами, услугами и работами. Оформление и анимация - важны, но мнение посетителя все же важнее мнения владельца (разработчика).
Если в обычном магазине покупатель всегда прав, то почему в интернет-магазине он должен делать все так, как придумал разработчик сквозь предложенный вариант оформления? Анимация в контексте CSS - отличный инструмент, но почему бы не пойти несколько дальше: сколько потребителей, столько и вариантов выражения функциональности и дизайна.
Вариант «потребительской анимации» - это когда есть и то, что предложил разработчик, и то, что выбрали предшествующие потребители, и то, что додумал текущий потребитель.
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 урока где анимация создается также, как в примере выше. | 18.02.2016 CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript. Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам. Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition
- «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды. Body > div {
width: 500px;
height: 309px;
background: #6d6d6d;
-webkit-transition: all 0.3s ease;;
-moz-transition: all 0.3s ease;;
-o-transition: all 0.3s ease;;
transition: all 0.3s ease;
}
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок: Color:hover {
background:#53ea93;
}
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет: Border:hover {
box-shadow: inset 0 0 0 23px #53ea93;
}
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали: Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6: Fade {
opacity: 1;
}
.fade:hover {
opacity: 0.6;
}
Для противоположного результата поменяйте значения местами: Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций: Grow:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера: Shrink:hover {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем: Circle:hover {
border-radius: 70%;
}
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z: Rotate:hover {
-webkit-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей): Threed:hover {
box-shadow:
1px 1px #53ea93,
2px 2px #53ea93,
3px 3px #53ea93,
4px 4px #53ea93,
5px 5px #53ea93,
6px 6px #53ea93,
7px 7px #53ea93;
-webkit-transform: translateX(-7px);
transform: translateX(-7px);
}
На сегодняшний день свойство transition поддерживается следующими браузерами: Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность. Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Для создания анимации применяются свойства CSS transition и animation
Рассмотрим их подробно с примерами. Элементы анимации не только делают дизайн удобнее и элегантнее, но и вызывают у пользователей положительные эмоции, которые буквально притягивают к сайту. Это что касается пользовательских показателей. Что же касается веб-разработки — анимация оживляет элементы контента средствами CSS, без привлечения JavaScript, что хорошо для мобильных устройств. Должен предупредить — прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS Основные компоненты CSS анимации — свойства transition
и animation
, и правило @keyframes
. Рассмотрим их по порядку. Свойство transition
применяется для создания простых анимаций, то есть оно создаёт эффект перехода между двумя состояниями элемента. transition
в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода. 1. transition-property
— определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет — color или background. Записывается так: transition-property
: left
; 2. transition-duration
— продолжительность эффекта перехода. Задаётся в секундах. transition-duration
: 3s
; 3. transition-timing-function
— скорость эффекта перехода. Принимает следующие значения: ease
— анимация медленно начинается, затем ускоряется и к концу опять замедляется; ease-in
— медленно начинается, а к концу ускоряется; ease-out
— быстро начинается, а к концу замедляется; ease-in-out
— замедление в начале и в конце; linear
— постоянная скорость; cubic-bezier
— задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1). 4. transition-delay
— задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы. В сокращённом варианте запись анимации выглядит следующим образом — в свойстве transition
задаются все вышеперечисленные значения по порядку через пробел. transition
: left 3s ease(или cubic-bezier(0.25,0.1,0.25,1) 3s
; Пример в котором элемент будет перемещаться при наведении на него курсора. Результат: Свойство animation
и правило @keyframes
применяются для создания анимации любой сложности. Свойство animation
задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes
задаётся сама анимация по шагам (изменения вида и положения) Свойство animation
включает в себя восемь составляющих: 1. animation-name
— имя анимации. задаётся произвольно. Необходимо для того, чтоб определить анимацию в блоке @keyframes
, так как для одного элемента может быть задано несколько анимаций. 2. animation-duration
— длительность анимации, задаётся в секундах (s) или миллисекундах (ms). 3. animation-timing-function
— определяет тип анимации и принимает следующие значения: ease
— скольжение; linear
— ровное движение; ease-out
— ускорение в начале; ease-in
— ускорение в конце; ease-in-out
— более плавное скольжение, чем ease cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com step-start и step-end
— задаёт пошаговую анимацию (счётчик) steps
— задаёт количество шагов за которые будет выполнена анимация (секундомер — steps(60) animation-duration -60s) 4. animation-iteration-count
— задаёт число повторений анимации. Принимает значения: любое число
— сколько раз повторяется анимация; infinite
— бесконечное повторение; 5. Animation-direction
— задаёт направление движения. Принимает значения: normal
— движение слева на право; reverse
— движение справа на лево; alternate
— полный цикл туда и обратно; alternate-reverse
— полный цикл, но начинается и заканчивается с конца; 6. animation-play-state
— задаёт остановку анимации. Принимает значения: running
— анимация проходит нормально (по умолчанию); paused
— анимация замирает на первом шаге; 7. animation-delay
— задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms) 8. animation-fill-mode
— позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения: none
— анимация в работает только в заданном времени воспроизведения, потом возвращается на место. forwards
— анимация продолжается после окончания времени воспроизведения; backwards
— анимация начинается до начала воспроизведения; both
— анимация работает и до начала и после окончания времени воспроизведения; Некоторые из этих свойств поначалу могут показаться абсурдными, но при создании сложных анимаций они позволяют реализовать смелые творческие решения. Все свойства можно записать в сокращённом виде, указав в свойстве animation
только их значения. Например: Правило @keyframes
— второй шаг в создании сложной анимации. Внутри этого правила создается поэтапное воспроизведение преобразований происходящих с элементом. На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes
внутрь которого помещаются селекторы последовательно определяющие состояние элемента. Например, возьмём элемент div
{ @keyframes nev
{ Селекторами from
и to
задаётся преобразование от одного состояния элемента до другого. Но гораздо удобнее задавать изменение состояния в процентах. Тогда число селекторов можно увеличить, и тем самым разбить процесс на большее число этапов. Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п. @keyframes nev
{ 50%
{ 100%
{ Пример появления и исчезновения квадрата: Результат: Надеюсь основы создания анимации понятны. Теперь, когда Вам известны свойства, значения и инструменты, открывайте Notepad++ и творите от простого к сложному. В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, очень часто применяющееся в анимациях.
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 посложнее
1. Изменение цвета при наведении курсора
2. Появление рамки
3. Свинг
@-webkit-keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.swing:hover {
-webkit-animation: swing 0.6s ease;
animation: swing 0.6s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
4. Затухание
5. Увеличение
6. Уменьшение
7. Трансформация в круг
8. Вращение
9. 3D тень
Поддержка браузерами
Десктопные браузеры
Internet Explorer
Поддерживается версией IE 10 и выше
Chrome
Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox
Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera
Поддерживается с версии 12.1
Safari
Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)
transition
animation и @keyframes
width
: 200px
;
height
: 200px
;
background-color
: #FF3D00
;
animation
: nev 5s infinite alternate
;
from
{ /* От */
opacity
: 0
; /* полная прозрачность */
}
to
{ /* До */
opacity
: 1
; /* полная непрозрачность */
}
}
0%
{
opacity
: 0
;
border-radius
: 50%
;
}
opacity
: 0.5;
border-radius
: 30%
;
}
opacity
: 1
;
border-radius
: 0
;
}
}
