Как придать индивидуальность веб-странице используя переходы и анимацию 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); } }
Наведите курсор на изображение, чтобы увидеть эффект.
