Осуждают то, чего не понимают.
Квинтилиан
П рогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.
Функция 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 ).
Рассмотрим свойства вызывающие переход:
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 Анимация похожа на 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
;
}
Многие из этих свойств знакомы из обсуждения переходов. Новыми являются:
Отличие анимации 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)
;
}
}
Наведите курсор на изображение, чтобы увидеть эффект.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
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
Создание анимации начинается с установки ключевых кадров правила @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%).
Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется.
Синтаксис
Div {animation-name: mymove;}
Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Синтаксис
Div {animation-duration: 2s;}
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье 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;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.
Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.
Синтаксис
Div {animation-delay: 2s;}
Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.
Синтаксис
Div {animation-iteration-count: 3;}
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
Синтаксис
Div {animation-direction: alternate;}
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется.
Синтаксис
Div:hover {animation-play-state: paused;}
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.
animation-fill-mode | |
---|---|
Значения: | |
none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Параметр transform
всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.
Object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
Это правило перемещение скажет браузеру анимировать все
параметры объекта на 2 секунды
(без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:
HTML
Создайте новый документ html и вставьте следующий код:
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0);
- переместим объект влево.
#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket {
top: 43%;
left: 44%;
}
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}
HTML
CSS
#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}
HTML
CSS
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
HTML
CSS
#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
HTML
CSS
#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .
Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс:hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).
Переходы применяются ко всем элементам, а также к псевдоэлементам:before и:after . Для задания всех свойств перехода обычно используют краткую запись свойства transition .
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на странице.
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
Синтаксис
Div { width: 100px; transition-property: width; } div:hover { width: 300px; }
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
Синтаксис
Div { transition-duration: .2s; }
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
transition-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 для кривой ускорения. вы сможете построить любую траекторию перехода. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div { transition-timing-function: linear; }
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
Пользовательское название | Значение функции |
---|---|
easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
Синтаксис
Div { transition-delay: .5s; }
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
{transition: transition-property transition-duration transition-timing-function transition-delay;}
Если воспользоваться значениями по умолчанию, то запись
Div {transition: 1s;}
будет эквивалентна
Div {transition: all 1s ease 0s;}
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
Div {transition: background 0.3s ease, color 0.2s linear;}
Div { transition-property: height, width, background-color; transition-duration: 3s; transition-timing-function: ease-in, ease, linear; }
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Параметр transform
всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.
Object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
Это правило перемещение скажет браузеру анимировать все
параметры объекта на 2 секунды
(без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:
HTML
Создайте новый документ html и вставьте следующий код:
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0);
- переместим объект влево.
#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket {
top: 43%;
left: 44%;
}
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}
HTML
CSS
#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}
HTML
CSS
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
HTML
CSS
#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
HTML
CSS
#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}