Вебмастеру
раздел создан в помощь вебмастеру для того чтобы разобраться с чего начать создание сайта.

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Поисковые системы
принцип работы поисковых систем, алгоритмы, факторы ранжирования.

Интересные статьи
здесь каждый найдёт для себя интересные статьи и ответы на вопросы связанные с созданием сайта.

Заработать в Интернете
реальные способы для вебмастера и не только, начни своё дело.

Известные люди
раздел содержит краткие биографии и истории из жизни людей повлиявших на ход истории Интернета.

Раскрутка сайта
эффективное продвижение сайта, выведи свой сайт на первые позиции.

Как придать индивидуальность веб-странице
используя переходы и анимацию CSS3

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

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

Содержание:


Функция 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 Анимация похожа на 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);
}
}

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


Помогите автору, поделитесь ссылкой на эту страницу со своими друзьями в социальных сетях.

Удачи!



Полезно почитать:
Как заработать деньгиВыбор хостинга для сайтаБесплатные игры онлайн
Монетизация
сайта для начинающих вебмастеров и не только.

Партнерские программы
лучшие партнёрки для заработка в сети.

Рынок Forex
это внебиржевой валютный рынок, участниками которого могут быть как крупные инвесторы, компании, так и рядовые жители любого уголка нашей планеты, имеющие доступ в интернет.

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

Полезные книги
книги по созданию, продвижению, поисковой оптимизации сайтов.

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.