Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.
Для реализации CSS анимации необходимо выставить специальные настройки трансформации, которые будут реагировать на события мыши. Также необходимо указать специальную функцию, которая будет отвечать за время выполнения анимации.
Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE - на -ms.
1. Введение в CSS трансформации
CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);
В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:
Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.
2. Анимация
Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:
Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.
CSS анимация может применяться не только к трансформациям, но также и к другим свойствам, таким как прозрачность, цвет и многое другое. Это продемонстрировано в следующем примере. Один элемент преобразуется в другой и наоборот:
Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.
4. Множественные трансформации на одном элементе
Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:
Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.
4. Анимация в действии
Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:
Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.
Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!
Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами .
5. Использование различных видов анимации
В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.
При событии:hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.
Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.
Также обратите внимание, что изменение цвета происходит до поворота.
Фишка в том, что вы можете разбить -webkit-transition на несколько записей:
#block { ... background: blue; ... -webkit-transition-property: left, top, background, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay: 0, 0, 0, 1s; ... } #stage:hover #block { left: 100px; top: 100px; background: red; -webkit-transform: rotate(360deg); }
6. Событие одного элемента преобразует другой
Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~.
Вот и соответствующий пример:
В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события.
#box2 { position: absolute; left: 120px; ... background: blue; ... } #box1:hover + #box2 { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); left: 627px; background: yellow; }
В то же время, мы можем анимировать и первый блок:
Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.
Спасибо Niall за предложенный урок!
| 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; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта 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 поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
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. До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье. CSS transitions позволяют сделать изменения CSS-свойств плавно и в течение некоторого времени. Таким образом, вы получаете возможность контролировать процесс перехода элемента от одного состояния к другому. Начнем с простейшего примера и продолжим дальше. При наведении курсора на квадрат плавно изменяется цвет фона. Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию: transition-property
- указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all. Transition-property: width;
transition-duration
- задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах. Transition-duration: 1s;
transition-timing-function
- временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это
целая тема для статьи, поэтому здесь мы не будем углубляться. Transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-delay
- задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах. Transition-delay: 500ms;
transition
- это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay. Transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;
У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд. С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions: CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример. Наш круг ожил и он как будто пульсирует. Есть 9 свойств, которые позволяют контролировать CSS animations: animation-name
- здесь указвается имя анимации, которое связывает правило @keyframes с селектором. Animation-name: my-animation;
@keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
animation-iteration-count
- задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно. Animation-iteration-count: 2;
animation-direction
- задаёт направление анимации. Animation-direction: reverse;
animation-play-state
- данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию). Animation-play-state: paused;
animation-fill-mode
- устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения: Animation-fill-mode: backwards;
Свойства animation-duration
, animation-timing-function
, animation-delay
работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться. С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример - это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров: Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов. В этой спецификаии есть 3 свойства: motion-path
- это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path. Motion-path: path("M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z");
motion-offset
- это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.
@keyframes airplane-fly {
0% { motion-offset: 0; }
100% { motion-offset: 100%; }
}
motion-rotation
- это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах ("-45deg", "30deg" и т.д). Motion-rotation: auto;
К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная. Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).
ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье. Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в 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-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто. А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие. 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 посложнее
CSS transitions
CSS animations
Motion Path Module
Основы создания
Синтаксис @keyframes
Применяем анимацию в действии
Пробуем
Бесконечная анимация в css3
Задержка перед началом
Направление
Форма анимации
