CSS-Transitions без использования :hover

До недавнего времени, наиболее распространенным вариантом использования CSS-transitions – было сочетание его с хорошо известным псевдо-классом CSS :hover.

Далее представлен наиболее простой пример изменения цвета ссылки, при наведении мыши, выполненный на чистом CSS:

a, a:link, a:visited {  
    color: lightblue;  
    -webkit-transition: color .4s linear;  
    -moz-transition: color .4s linear;  
    -o-transition: color .4s linear;  
    -ms-transition: color .4s linear;  
    transition: color .4s linear;  
}  
  
a:hover {  
    color: white;  
}  

Этот код запустит анимацию свойства color, когда вы подведете мышь к ссылке. Наверняка этот простой пример не раз попадался вам на разных сайтах, но это не значит, что transitions ограничивается использованием псевдо-класса :hover.

С помощью transitions, вы можете анимировать различные CSS-свойства, используя определенные CSS-приемы. Некоторые из этих приемов, (включая демо-версию каждого) приведены в сегодняшней статье.

Transitions с использованием :active

Псевдо-класс :active применяется к любому элементу, находящемуся в процессе активации. Основным способом “активации” элемента, является щелчок мышью или нажатие кнопки мыши.

Далее представлен CSS-пример, демонстрирующий использование :active совместно с CSS3-transitons, для имитации события mousedown:

.box {  
    width: 300px;  
    height: 300px;  
    background: #222;  
    -webkit-transition: width 2s ease, height 2s ease;  
    -moz-transition: width 2s ease, height 2s ease;  
    -o-transition: width 2s ease, height 2s ease;  
    -ms-transition: width 2s ease, height 2s ease;  
    transition: width 2s ease, height 2s ease;  
}  
  
.box:active {  
    width: 500px;  
    height: 500px;  
}  

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

Пример.

Transitions с использованием :focus

Вы можете использовать псевдо-класс :focus, для получения эффекта, описанного в предыдущем примере. В этот раз мы используем форму, и анимируем ширину любого элемента формы, получившего фокус:

input, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  
  
input:focus, textarea:focus {  
    width: 340px;  
}  

Пример.

Transitions с использованием :checked

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

Поэтому, мы сделаем простое изменение ширины, которое будет появляться в качестве подтверждения отметки текущего элемента:

input {  
    height: 20px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  
  
input:checked {  
    width: 30px;  
}  

Пример.

Transitions с использованием :disabled

Продолжая тему стилизации веб-форм, в этот раз мы комбинируем css3-transitions с jQuery, для запуска анимации фонового цвета элементов формы, при их отключении через атрибут disabled:

input[type="text"], textarea {  
    background: #e2e2e2;  
    -webkit-transition: background 1s ease;  
    -moz-transition: background 1s ease;  
    -o-transition: background 1s ease;  
    -ms-transition: background 1s ease;  
    transition: background 1s ease;  
}  
  
input:disabled, textarea:disabled {  
    background: #666666;  
}  

И немного jQuery, чтобы удалять/добавлять атрибут disabled:

$(function() {  
    $('input[type="radio"]').click(function() {  
        if ($(':checked').val() === "other") {  
            $('input[type="text"]').removeAttr("disabled");  
        } else {  
            $('input[type="text"]').attr("disabled", "disabled");  
        }  
    });  
});  

Итак, если отмечен последний из радиобаттонов (тот, что со значением “Другое”), у текстового поля удаляется атрибут disabled, при отметке остальных радиобаттонов, атрибут disabled, заново применяется к текстовому полю.

Псевдо-класс :disabled применяется к элементу, имеющему одноименный атрибут, поэтому анимация будет срабатывать всякий раз при удалении или добавлении этого атрибута.

Пример.

Transitions с использованием Медиа-запросов

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

Тем не менее, это еще один способ использования CSS3-transitions. Такой прием используется на сайте modernizr.com.

.box {  
    width: 440px;  
    height: 440px;  
    background: #222;  
    margin: 0 auto;  
    -webkit-transition: width 2s ease, height 2s ease;  
    -moz-transition: width 2s ease, height 2s ease;  
    -o-transition: width 2s ease, height 2s ease;  
    -ms-transition: width 2s ease, height 2s ease;  
    transition: width 2s ease, height 2s ease;  
}  
  
@media only screen and (max-width : 960px) {  
    .box {  
        width: 300px;  
        height: 300px;  
    }  
} 

Этот пример одновременно анимирует два свойства, разделенных запятой. Медиа-запрос велит блоку уменьшиться, если размер экрана становится меньше 961 пикселя.

Измените размер окна демонстрационной страницы, чтобы увидеть как это работает.

Пример.

Несколько замечаний относительно примеров кода

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

Кроме того, добавлен префикс –ms, и хотя IE8 и IE9 не поддерживают transitions, но эта поддержка очевидно будет добавлена в версии IE10.

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

Перевод статьи “CSS3 Transitions Without Using :hover”, автор Louis Lazaris