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).

Свойство CSS transform (от слова "трансформация") позволяет видоизменять элемент на html-страницах. Например, можно

  • вращать
  • смещать
  • изменять масштаб
  • наклонять
  • комбинировать выше описанные действия

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

1. Синтаксис CSS transform

transform : трансформация1 [трансформация2 ];

Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Примечание про браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

  • -ms-transform - для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform - для Chrome, Safari, Android и iOS
  • -o-transform - для Opera до версии 12.10
  • -moz-transform - для Firefox до версии 16.0

2. transform:rotate(x) - вращение объекта

Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

Примечание

Свойства:

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition . Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) - смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках - смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках - масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale ), вращение (rotate ) и перемещения (translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

  • none - отсутствие преобразований (по умолчанию включено оно);
  • matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
  • translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
  • scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
  • rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
  • rotateX(x) - 3d вращение по оси X;
  • rotateY(x) - 3d вращение по оси Y;
  • rotateZ(x) - 3d вращение по оси Z;
  • perspective(n) - перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""

Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

Осуждают то, чего не понимают.
Квинтилиан

П рогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.

Функция CSS3 Transitions

Функция CSS3 Transitions заключается в плавном изменении одного значения свойства CSS на другое. Другими словами, переходы CSS позволяют плавно изменять одно анимированное состояние на другое в течение заданного времени.

Рассмотрим следующую разметку:

#img {
opacity : 1;

transition-duration : 2s ;
transition-delay : 0s ;

}

#img:hover {
opacity : 0 ;
}

Что же из этого следует? А вот что. Если переместить курсор на изображение, то оно начнёт плавно исчезать (transition-property : opacity ) в течении 2 секунд (transition-duration : 2s ), без задержки во времени (transition-delay : 0s ).

Рассмотрим свойства вызывающие переход:

  • transition-property - указывает имя свойства CSS для эффекта перехода. Эффект перехода обычно происходит тогда, когда пользователь наводит курсор на элемент. Значение по умолчанию "all".
  • transition-duration - определяет, сколько секунд (s) или миллисекунд (ms) необходимое для завершения эффекта перехода. По умолчанию значение равно нулю, что означает, что переход происходит мгновенно.
  • transition-delay - определяет, когда эффект перехода начнется. Значение transition-delay указывается в секундах (s) или в миллисекундах (ms). Время может быть отрицательным, в этом случае переход начинается на полпути от его продолжительности. Значение по умолчанию равно нулю.
  • transition-timing-function - задает скорость эффекта перехода. Это свойство позволяет изменять скорость в течении эффекта перехода.

id="imageWrapper" >
id="backImage" src ="imageB.jpg" />
id="frontImage" src ="imageA.jpg" />

#imageWrapper {
display : inline-block ;
width : 320px ;
height : 240px ;

position : relative ;
}

#imageWrapper img {
width : 320px ;
height : 240px ;
position : absolute ;
transition-property : opacity ;
transition-duration : 2s ;
transition-timing-function : linear ;
}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity : 1 ;
}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity : 0 ;
}

Вот что получилось из этой разметки:

Наведите курсор на изображение, чтобы увидеть эффект CSS3 перехода.

Функция CSS3 Animations

CSS3 Анимация похожа на CSS3 Transitions в том, что они плавно анимации значения CSS с течением времени. Различия (а) как один указывает свойства анимации, (б) каким запускает анимацию и (в) сложность анимации возможно.

Эффект анимации осуществляется с использованием “@keyframes ”. Эффект анимации позволяет элементу постепенно изменяться от одного стиля к другому. Можно изменить столько стилей, сколько вы хотите. Столько раз, сколько вы хотите.

Выглядит так:

@keyframes fadeOut {
from {
opacity : 1 ;
}
to {
opacity : 0 ;
}
}

#img {
animation-duration : 2s ;
animation-delay : 0s ;
animation-timing-function : linear ;

}

Img:hover {
animation-name : fadeOut ;
}

Многие из этих свойств знакомы из обсуждения переходов. Новыми являются:

  • animation-fill-mode - значение forwards указывает браузеру, что следует остановить анимацию на последнем кадре по окончанию последнего повтора и не отматывать ее к первоначальному состтоянию.
  • animation-name - указывает имя keyframe , которое вы хотите связать с селектором.
  • animation-timing-function - указывает скорость анимации. Кривая скорости определяет время анимации, которое используются для перехода от одного набора стилей CSS к другому. Используется для плавного изменения скорости.

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

Это позволяет программировать такие эффекты, как показано в разметке и примере ниже:

#bouncingImage {
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
animation-duration : 2s ;
animation-timing-function : ease-in-out ;
animation-fill-mode : forwards ;
}

#bouncingImage:hover {
animation-name : zoomInBounce ;
}

@keyframes zoomInBounce {
from {
transform : scale(1) ;
}

30% {
transform : scale(1.4) ;
}

40% {
transform : scale(1.15) ;
}

50% {
transform : scale(1.35) ;
}

60% {
transform : scale(1.2) ;
}

70% {
transform : scale(1.3) ;
}

80% {
transform : scale(1.225) ;
}

90% {
transform : scale(1.275) ;
}

To {
transform : scale(1.25) ;
}
}

Наведите курсор на изображение, чтобы увидеть эффект.

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

Анимация на CSS3 с помощью transition

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

Свойство transition ответственно за параметры анимации, такие как: изменяемое CSS-свойство объекта, длительность анимационного перехода, функция времени, задержка анимации.

transition : свойство скорость_анимации временная_функция задержка

Самый банальный вариант анимации на CSS3 - преобразование цвета блока при наведении. Посмотрим как это получится transition и без него:

Используя transition. (Цвет фона меняется плавно.)

With_transition { background :#efefef; -webkit-transition : background 1s linear 0s ; -moz-transition : background 1s linear 0s ; -o-transition : background 1s linear 0s ; transition : background 1s linear 0s ; } .with_transition:hover { background :#F9FF66; }

Без transition. (Цвета заменяют друг друга мгновенно.)

Without_transition { background :#efefef ; } .without_transition:hover { background :#91FF66 ; }

Свойство transition простое и понятное. Хочу только остановиться на одном из его параметров - временной функции. Эта функция задается с помощью кривой Безье (cubic-bezier ), которая принимает 4 значения (x1,y1,x2,y2) - координаты направляющих точек.

Несколько частных случаев этой функции имеют свои названия, например linear. Но если нужен нестандарный эффект, то можете воспользоваться данным генератором . Покажу вариант использования нестандартной временной функции:

.over { -webkit-transition : ; -moz-transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; -o-transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; left :0px ; } .kot-krol:hover .over{ left:325px ; }

Трансформация на CSS3 (transform)

Анимация на сайтах выглядит круто, даже если это обычное изменение фона или положения объекта. Но намного эффектнее будет применить трансформацию. Для нее в CSS3 существует свойство transform и несколько значений, которые оно может принять. Ниже рассмотрю все возможные:

Например, используем поворот transform : rotate(<угол>) :

.orange img, .kiwi img, .apricot img { -webkit-transition : all 0.5s linear 0s ; -moz-transition : all 0.5s linear 0s ; -o-transition : all 0.5s linear 0s ; transition : all 0.5s linear 0s ; } .orange:hover img, .kiwi:hover img, .apricot:hover img { -webkit-transform : rotate(360deg) ; -moz-transform : rotate(360deg) ; -ms-transform : rotate(360deg) ; -o-transform : rotate(360deg) ; transform : rotate(360deg) ; }

Или же смещение transform : translate(x, y) :

.translate img { -webkit-transition :all 1.5s ease-in 0s ; -moz-transition : all 1.5s ease-in 0s ; -o-transition : all 1.5s ease-in 0s ; transition : all 1.5s ease-in 0s ; } .translate:hover img { -webkit-transform : translate(300px) ; -moz-transform : translate(300px) ; -ms-transform : translate(300px) ; -o-transform : translate(300px) ; transform : translate(300px) ; }

Также можно применить масштаб transform : scale(x, y) :

.scale img { -webkit-transition : all 1.5s linear 0s ; -moz-transition : all 1.5s linear 0s ; -o-transition : all 1.5s linear 0s ; transition : all 1.5s linear 0s ; } .scale:hover img { -webkit-transform : scale(1.4) ; -moz-transform : scale(1.4) ; -ms-transform : scale(1.4) ; -o-transform : scale(1.4) ; transform : scale(1.4) ; }

И еще наклон transform : skewX[Y](<угол>) :

.skew { -webkit-transition : all 1.5s linear 0s ; -moz-transition : all 1.5s linear 0s ; -o-transition : all 1.5s linear 0s ; transition : all 1.5s linear 0s ; } .skew:hover { -webkit-transform : skew(-30deg) ; -moz-transform : skew(-30deg) ; -ms-transform : skew(-30deg) ; -o-transform : skew(-30deg) ; transform : skew(-30deg) ; }

Более сложные трюки с анимацией на CSS3 (animation, @keyframes)

Все это помогает быстро и просто сделать интересный дизайн. Казалось бы, чего еще желать? Но я столкнулась с проблемой, с которой не удалось справится лишь CSS-свойствами transform и transition .

Речь идет о следующем: хотелось на некотором сайте сделать один блок постоянно вращающимся. Конечно, первая мысль - написать пару строчек на JavaScript, но до сегодняшнего дня меня успели убедить в том, что такой подход неправильный и даже некрутой! Пришлось искать другие пути.

Итак, я узнала о CSS-свойствах animation и @keyframes . Действительно очень полезная для анимации на CSS3 штука!

Два вышеупомянуых свойства функционируют вместе. animation задает параметры анимации (продолжительность анимации, временную функцию, задержку, количество итераций). Последнее представляло для меня особый интерес.

@keyframes , в свою очередь, вмещает разные состояния анимируемого элемента, как бы точки отсчета. Первым параметром animation принимает имя @keyframes . Выглядит это, примерно, вот так:

.kot { -webkit-animation : rotating 30s infinite linear ; -moz-animation : rotating 30s infinite linear ; -ms-animation : rotating 30s infinite linear ; -o-animation : rotating 30s infinite linear ; animation : rotating 30s infinite linear ; } @-webkit-keyframes rotating { to { -webkit-transform : rotate(360deg); } } @-moz-keyframes rotating { to { -moz-transform : rotate(360deg); } } @-ms-keyframes rotating { to { -ms-transform : rotate(360deg) ; } } @-o-keyframes rotating { to { -o-transform : rotate(360deg) ; } } @keyframes rotating { to { transform : rotate(360deg) ; } }

Для моей задачи - постоянно вращающийся блок на CSS3 - хватило задать только конечное положение элемента (to). Но в @keyframes можно задавать и начальное положение (from), и любые промежуточные в процентах. Это пригодится для создания более сложных анимаций.

CSS3 позволил делать много новых эффектов, не прибегая к помощи JavaScript-библиотек. В этой статье расскажу о том, как реализовать с помощью css3 плавное появление любого элемента.

Смотрим на примере

Допустим, у нас есть два одинаковых блока. В html разметке я предлагаю обозначить их так:

Блок 1
Блок 2

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

Block{ font-size: 50px; width: 200px; height: 120px; background: green; margin-bottom: 30px; transition: 1s }

Этими правилами мы прописали обоим блокам одинаковый внешний вид: высоту, ширину, размер шрифта, отступ и зеленый фон. Последнее свойство transition как раз и является относительно новым и входит в версию CSS3 . Оно обозначает задержку, после которой выполняются определенные правила. По сути, именно это дает плавное появление.

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

Как реализовать в css3 плавное появление?

Дальше есть два варианта действий. Допустим, нам нужно пока скрыть второй блок, а при наведении на первый плавно выводить его. Наиболее часто для скрытия элемента применяют правило display: none , но оно не даст именно того, чего нужно – плавного появления. Элемент появится резко.

Поэтому мы поступим по-другому. Смотрите этот код:

Block2{ opacity: 0; } .block1:hover + .block2{ opacity: 1 }

Мы использовали еще одно CSS3-свойство – opacity . Оно задает прозрачность элемента, которая прописывается от 0 (полностью прозрачный) до 1 (полностью непрозрачный) элемент.

Сначала полностью убираем второй блок от глаз, делая его прозрачным. Теперь нужно сделать так, чтобы при наведении мышки на первый блок плавно появлялся второй. Для этого используется такой вот интересный комбинированный селектор.block1:hover + .block2

То есть само изменение стилей происходит при наведении на первый блок, а изменяется непосредственно второй. Благодаря прописанному ранее transition он появится не резко, а плавно, что нам с вами и нужно. Изменяя значение transition можно сделать появление более резким или наоборот еще больше замедлить его.