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

Несимметричные переходы

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

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

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

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

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

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;
} 

Посмотрите демонстрацию работы несимметричного перехода.

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

Множественные переходы 

К разным свойствам 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. Удваивание ширины с 10em до 20em за одну секунду с помощью временной характеристики перехода ease.
2. Изменение радиуса границы с 5px до 50% за две секунды с помощью временной функции ease-out.
3. Изменение цвета фона с красного на голубой за пять секунд с помощью временной функции linear.

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

Значения берутся по кругу, если их не задать, например:

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

1. Ширина анимируется в течение одной секунды с помощью временной характеристики перехода ease.
2. Радиус границы анимируется в течение двух секунд с помощью временной функции ease.
3. Цвет фона анимируется в течение одной секунды с помощью временной характеристики перехода ease.

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

Автор урока Craig Buckler

Смотрите также: