В настоящее время, существует много методов для изменения свойств CSS с помощью трансформации. Рассмотрим некоторые из них.
Трансформации с использованием псевдо-класса :hover.
Чаще всего, трансформации CSS3 используются в сочетании с псевдо-классом CSS :hover.
Типовая конструкция для анимированного изменения цвета ссылки выглядит следующим образом:
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, при наведении курсора мыши на ссылку. Остальные примеры можно посмотреть, нажав на ссылку.
Трансформации с использованием псевдо-класса :active
Псевдо-класс :active можно использовать к любому элементу, который находится в состоянии активации, происходящий в момент нажатия на элементе кнопки мыши.
.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
Использование ниже наведенного кода, изменяет ширину поля ввода текста в форме, при определении фокуса ввода.
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;
}
Ниже наведенный код устанавливает и отключает disabled.
$(function() {
$('input[type="radio"]').click(function() {
if ($(':checked').val() === "other") {
$('input[type="text"]').removeAttr("disabled");
} else {
$('input[type="text"]').attr("disabled", "disabled");
}
});
});
В нашем случае он применяется для радио кнопок. Их у нас несколько, нажатие на последнюю кнопку, снимает атрибут selected. Нажатие на любую другую кнопу, возобновляет атрибут.
Элемент disabled зависит от атрибута. При установке (снятии) отметки, происходит анимация.
