Как придать индивидуальность веб-странице используя переходы и анимацию CSS3
Осуждают то, чего не понимают.
Квинтилиан
Прогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.
Содержание:
Функция CSS3 Transitions
Функция CSS3 Transitions заключается в плавном изменении одного значения свойства CSS на другое. Другими словами, переходы CSS позволяют плавно изменять одно анимированное состояние на другое в течение заданного времени.
Рассмотрим следующую разметку:
#img {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: linear;
}
#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 – задает скорость эффекта перехода. Это свойство позволяет изменять скорость в течении эффекта перехода.
Далее на простом примере посмотрим, как затухание одного изображения приводит к появлению другого. Ниже приведена разметка, которая решает эту задачу:
HTML – код:
< div id="imageWrapper"> < img id="backImage" src="imageB.jpg" /> < img id="frontImage" src="imageA.jpg" /> < /div>
CSS – код:
#imageWrapper {
display: inline-block;
width: 320px;
height: 240px;
box-shadow: 2px 2px 5px 0px gray;
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;
animation-fill-mode: forwards;
}
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);
}
}
Наведите курсор на изображение, чтобы увидеть эффект.