css3-transitions-non-hover

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

CSS-Transitions без использования :hover: 4 комментария

  1. очередная интересная статья, которую автор пропустил через себя. Благодарность от начинающего сеошника)

  2. Отличные примеры, очень полезная статья для оживления страницы. Некоторые мелочи, можно будет выкинуть за счет этого своих js скриптов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *