Результат данного урока работает в браузерах 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 за предложенный урок!
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 реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом: Создаются сами эффекты переходов с помощью @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-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто. А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие. Большая часть того, что приносит нам удовольствие в анимации, связано с перемещением по экрану различных объектов. hover
эффекты CSS
привлекают внимание пользователей к контенту, определенной части интерфейса и улучшают общее восприятие ресурса. Перемещение может быть немного сумасшедшим, как это: Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже: Your browser does not support inline frames or is currently configured not to display inline frames. В приведенных примерах перемещение реализовано с помощью CSS
. И анимация, и переходы CSS
позволяют чрезвычайно просто перейти от статики к движению. Но, несмотря на эту простоту, есть определенные нюансы, которые нужно учитывать, чтобы CSS hover
эффект при наведении работал плавно. В этой статье я расскажу именно о них. При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют несколько свойств CSS
, которые применяются для этого. Но я хочу порекомендовать вам использовать функцию translate3d
свойства transform
вместо привычных margin
, padding
, left
, top
, потому что она обеспечивает более плавную анимацию. Функция translate3d
принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали: Аргумент Х
задает перемещение по горизонтали, Y
— по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом: Foo {
transform: translate3d(20px, 20px, 0px);
} Третий аргумент, который определяет перемещение по оси Z
, мы рассматривать не будем. Так как нас интересует 2d-hover эффекты CSS
. Как видите, функция translate3d
не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS
для создания движения. Чтобы использовать это свойство в переходе, нужно выполнить два этапа. Сначала необходимо указать transform в качестве свойства, которое должно отслеживать переход: PictureContainer img {
position: relative;
top: 0px;
transition: transform .2s ease-in-out;
} Определив переход, вы можете задать свойство transform
с функцией translate3d
: PictureContainer img:hover {
transform: translate3d(0px, -150px, 0px);
} Как показано в примере, приведенном в начале статьи, CSS hover
эффект при наведении курсора мыши на любой из элементов приводит к смещению изображения вверх на 150 пикселей. В случае анимации, убедитесь, что ключевые кадры в @keyframes
содержат свойство transform с translate3d
: @keyframes bobble {
0% {
transform: translate3d(50px, 40px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(50px, 50px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50px, 40px, 0px);
}
} Пример из статьи содержит все, что нужно, чтобы вы увидели, как работает CSS hover
эффект для табличной верстки. Чтобы разметка работала в различных браузерах, обязательно используйте для свойства transform
вендорные префиксы или библиотеку —prefix-free
. Также можно создавать анимацию перемещения в JavaScript
. Те же правила действуют и здесь. Сначала нужно установить позицию, используя transform translate3d
, но в JavaScript
это немного сложнее. Фрагмент кода, который нужен для этого, выглядит следующим образом: function getSupportedPropertyName(properties) {
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style] != "undefined") {
return properties[i];
}
}
return null;
}
var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform);
if (transformProperty) {
item.style = translate3d(someValueX, someValueY, 0px);
} Этот код кажется сложным потому, что мы используем префиксы и проверяем соответствие используемой версии функции transform
. Почему нам не подходит установка позиции с помощью margin
, top
, left
и т.д.? Если у вас нет на то особой причины, не используйте для создания hover
эффектов CSS
свойства margin
, padding
, top
, left
, bottom
или right
. Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить… Когда вы изменяете набор значений для шести свойств CSS
, которые я только что перечислил, браузер выполняет дополнительные вычисления того, как это отобразится на макете всей страницы. Я не против того, чтобы использовать эти свойства для работы с макетом. Но их применение в анимации или переходах, и изменение значений шестьдесят раз в секунду – это чересчур. Вы можете задать для position
элемента, который вы перемещаете, значение fixed
или absolute
. Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d
не обязательно будет идентичен результату, получаемому при использовании margin
, padding
и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны. Когда мы имеем дело с отображением элементов на экране, связанные с этим вычисления можно производить с помощью процессора или видеокарты. Но для создания CSS hover
эффектов для табличной верстки лучше задействовать видеокарту: GPU
предназначен только для обработки задач, связанных с отображением на экране. В то же время процессор параллельно обрабатывает огромное количество разнообразных задач. И для того, чтобы ваша анимация отображалась плавно, нельзя пренебрегать этой закономерностью. Разница в плавности отображения анимации может быть не сильно заметна на мощном стационарном компьютере или ноутбуке, но явно проявится на мобильных устройствах. Из личного опыта могу сказать, что на этих устройствах анимация с использованием CPU
проигрывается более прерывисто, чем та, которая использует GPU
. А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU
? Применить translate3d
! При преобразовании элемента с помощью translate3d
он обрабатывается через GPU
в Webkit-браузерах
, таких как Chrome
и Safari
(которые установлены на iPhone
и iPad
), в Internet Explorer 9/10
, а также в последних версиях Firefox
. Это дает translate3d
явные преимущества. Что касается hover
эффектов CSS
, созданных на JavaScript
, где все интерполяции обрабатывается кодом, я на самом деле не знаю, является ли использование GPU
таким продуктивным. Но для установки с помощью JavaScript
переходов и анимации CSS
со свойством translate3d
используется GPU
. Когда вы применяете JavaScript
, чтобы задать свойства анимации или переходов, интерполяция между начальной и конечной точкой анимации все равно создается с помощью браузера. Перемещающиеся синие круги, которые вы могли видеть в начале этой статьи, являются подтверждением этого. Боже, благослови преобразования! Причина, по которой transform
является более производительным, заключается в том, что оно не затрагивают никакие другие элементы. Любые действия, которые вы выполняете, применяются только к одному элементу, и браузеру не нужно перестраивать все окно. Он модифицирует только ту часть экрана, которая содержит перемещающийся контент. Это не зависит от того, задействован GPU
или нет. Мы недавно видели, что переходы
- это просто способ анимации
стилевых свойств от исходного
до конечного
состояния. Итак, переходы в CSS являются специфическим
видом анимации, где: Но что если вы хотите: Анимация в CSS позволяет всё это, и не только. Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры). Как и transition
, свойство animation
является сокращённым
для нескольких других: Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания
:
@keyframes bouncing{
0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); }
}
.loading-button {
animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;
}
Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes
и назвать её . Я использовал сокращенное
свойство animation
и включил все возможные варианты: Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров
. Вообще, ключевые кадры - это каждый промежуточный шаг
в анимации. Они определяются с помощью процентов: Можно также использовать ключевые слова from
и to
вместо 0% и 100%, соответственно. Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них. Каждый ключевой кадр является правилом CSS
, это означает, что вы можете писать свойства CSS как обычно. Чтобы определить анимацию, просто напишите ключевое слово @keyframes
с его названием
:
@keyframes around {
0% { left: 0; top: 0; }
25% { left: 240px; top: 0; }
50% { left: 240px; top: 140px; }
75% { left: 0; top: 140px; }
100% { left: 0; top: 0; }
}
p { animation: around 4s linear infinite; }
Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила
CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite
, то анимация будет идти от 0% до 100%, а затем немедленно обратно
к 0% и так бесконечно. Название
анимации используется, по крайней мере, дважды
: Подобно именам классов CSS, название анимации может включать в себя только: Название не может начинаться с цифры или с двух дефисов. Как и длительность перехода , длительность анимации может быть установлена в секундах
(1s) или миллисекундах
(200ms). Selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще. Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова
, такие как linear
, ease-out
или могут быть определены с помощью произвольных кривых Безье
. Selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease
. Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную
функцию времени и моделировать
конкретную кривую Безье, определяя множество очень специфичных
ключевых кадров. Посмотрите Bounce.js для создания передовой анимации. Как и с задержкой перехода , задержка анимации может быть установлена в секундах
(1s) или миллисекундах
(200ms). По умолчанию равно 0s, что означает отсутствие любой задержки. Полезно использовать, когда включается несколько анимаций в серии
. A, .b, .c { animation: bouncing 1s; }
.b { animation-delay: 0.25s; }
.c { animation-delay: 0.5s; }
По умолчанию, анимация воспроизводится только один раз
(значение 1). Вы можете установить три типа значений: Свойство animation-direction
определяет, в каком порядке
читаются ключевые кадры. Это легче представить, если счётчик итераций анимации установлен как infinite
. Свойство animation-fill-mode
определяет, что происходит перед
началом анимации и после
её завершения. При определении ключевых кадров
можно указать правила CSS
, которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться
с теми, которые уже применяются
к анимируемым элементам. animation-fill-mode позволяет сообщить браузеру, если стили анимации
также
должны применяться за пределами анимации
. Давайте представим себе кнопку
, которая является:
Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу
в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...
Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...
В современном мире все стремительно меняется. Фотоаппараты всех моделей, от самых дешевых «мыльниц» до профессиональных «зеркалок», умеют снимать видеоролики качества HD. Такое видео возможно и для дорогих моделей мобильных телефонов. Стандарты...
1
<div
class
=
"toSmallWidth"
>
div
>
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 посложнее
Основы создания
Синтаксис @keyframes
Применяем анимацию в действии
Пробуем
Бесконечная анимация в css3
Задержка перед началом
Направление
Форма анимации
Преобразование с помощью translate3d()
Переход
Анимация
Не забывайте о префиксах
Переходы с помощью JavaScript
Ненужные вычисления
Аппаратное ускорение
Как насчет JavaScript?
Свойства анимации
Быстрый пример
@keyframes
animation-name
@keyframes whatever {
/* ... */
}
.selector { animation-name: whatever; }
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
.selector { animation-iteration-count: infinite; }
animation-direction
animation-fill-mode