В настоящее время наиболее часто трансформации CSS3 используются в сочетании с хорошо известным псевдо-классом 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 при наведении курсора мыши на ссылку. Достаточно просто, и вы наверняка встречались с подобными конструкциями. Но трансформации не ограничиваются в использовании только псевдо-классом :hover.
Вы можете анимировать изменения свойств CSS с помощью трансформаций при использовании других методов, некоторые из которых перечислены ниже. Для каждого метода приводится пример, который открывается на отдельной странице при нажатии на название метода.
Трансформации с использованием псевдо-класса :active
Псевдо-класс :active соответсвует любому элементу, который находится в состоянии активации. Состояние активации обычно происходит в момент нажатия на элементе кнопки мыши.
Вот такой код используется в демонстрации для имитации события 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;
}
Данный код будет изменять размеры прямоугольника, пока на нем удерживается нажатой кнопка мыши. Если кнопку мыши отпустить, размеры изменяются к своему первоначальному значению.
Для просмотра демонстрации нажмите на название метода.
Трансформации с использованием псевдо-класса :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;
}
Для просмотра демонстрации нажмите на название метода.
Трансформации с использованием псевдо-класса :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;
}
Для просмотра демонстрации нажмите на название метода.
Трансформация с использованием псевдо-класса :disabled
Комбинируя JavaScript (в примере jQuery) с трансформациями CSS3 сделаем эффектное изменение цвета фона элемента при отключении атрибута 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");
}
});
});
Когда отмечается последняя радио кнопка, атрибут selected снимается. А если отметить другую опцию, то атрибут selected восстанавливается.
Псевдо-класс :disabled зависит от атрибута, поэтому при установке/снятии отметки происходит анимация изменения свойств элемента.
Для просмотра демонстрации нажмите на название метода.
Трансформации с использованием медиа запросов
В завершении рассмотрим также использование медиа запросов. При изменении размеров экрана элементы также могут плавно изменять свои размеры.
.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;
}
}
В примере одновременно происходит изменение двух свойств элемента, когда размер экрана становится меньше 961px.
Для просмотра демонстрации нажмите на название метода.
Заключение
В код примеров включен префикс -ms-. Хотя даже IE9 и IE10 пока не поддерживают трансформации CSS3, ожидается, что Microsoft снабдит свое детище новыми возможностями.