Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu
  • О чем это все
Menu

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

14.11.201122.11.2011

До недавнего времени, наиболее распространенным вариантом использования 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

4 комментариев

  1. Иван:
    22.11.2011 в 12:05

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

    Ответить
  2. Alexpts:
    04.02.2012 в 09:44

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

    Ответить
  3. DXE:
    29.02.2012 в 13:46

    Прекрасно! Спасибо за чудесные статьи. Ждем продолжении.

    Ответить
  4. ilnar:
    26.06.2013 в 19:14

    Спасибо автору, полезная статья. Просто и доходчиво объяснено!!

    Ответить

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

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

Об авторе

avatar

Ольга Фомина

Senior Frontend Developer
Почтовые технологии
telegram youtube instagram vkontakte

Рубрики

  • angular
  • JavaScript
  • nodejs
  • svg
  • wordpress
  • верстка
  • изучаем Jquery
  • общая
  • переводы
  • плагины Jquery
  • юнит-тесты
© 2025 Очередной блог фрилансера | Powered by Superbs Personal Blog theme