Статьи

Усовершенствованные эффекты перехода CSS3

Октябрь 29, 2018

В заключительной части этой серии о переходах CSS3 мы рассмотрим несколько более продвинутых тем перехода.

Альтернативные реверсивные переходы

В наших предыдущих примерах мы применили единственное свойство перехода, которое используется при переходе из состояния начала в конец (зависания) и в обратном направлении из конца в состояние начала, например 

p#animate
{
	color: #ff6;
	transition: all 3s ease-in-out 0.5s;
}

p#animate:hover
{
	color: #0f0;
	transform: scale(4);
}

(Обратите внимание, что префиксы -webkit не отображаются, но в настоящее время необходимы для перехода и преобразования.)

В этом примере, если вы наведите курсор мыши на элемент не менее чем на 0,5 секунды, он увеличится в 4 раза и изменит цвет в течение трех секунд. Когда вы перемещаете курсор от элемента, он будет ждать еще 0,5 секунды, а затем вернется в исходное состояние в течение трех секунд.

Но что, если мы хотим, чтобы элемент мгновенно вернулся назад? К счастью, мы можем применить два разных перехода; один для анимации между начальным и конечным состоянием, и один для реверсивной анимации между конечным и начальным состоянием: 

 p#animate
{
	color: #ff6;
	transition: all 0.5s ease-in-out;
}

p#animate:hover
{
	color: #0f0;
	transform: scale(4);
	transition: all 3s ease-in-out 0.5s;
}

Посмотрите переходную демонстрационную страницу…

Это иллюстрирует элемент, который медленно переходит в конечное состояние, но быстро возвращается в начальное состояние. Обратите внимание, что свойство transition Следовательно, наше: hover (конечное) состояние имеет продолжительность три секунды, а нормальное (начальное) состояние имеет продолжительность 0,5 секунды.

Несколько переходов

К отдельным свойствам CSS могут применяться различные эффекты перехода. Это лучше всего иллюстрируется на примере: 

 p#animate
{
	width: 10em;
	background-color: #F00;
	border-radius: 5px;
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s, 5s;
	transition-timing-function:  ease, ease-out, linear;
}

p#animate:hover
{
	width: 20em;
	background-color: #00F;
	border-radius: 50%;
}

Просмотрите страницу демонстрации нескольких эффектов перехода …

По сути, мы определили три отдельных перехода при наведении на элемент:

  1. width
  2. border-radius
  3. background-color

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

Цикл значений, если вы их опускаете, например 

 p#animate
{
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s;
	transition-timing-function:  ease;
}
  1. width
  2. border-radius
  3. background-color

Если вы следили за этой серией, теперь вы знаете почти все, что нужно знать о переходах CSS3. Надеюсь, вы разработаете лучшие примеры, чем те, которые я здесь показал!

33
Share: