Статьи

Полное руководство по переходам CSS

В золотые дни Интернета у нас была небольшая вещь, называемая Flash, которая помогает нам сделать Интернет динамичным, веселым, интерактивным местом. Но Flash используется все реже и реже. Конечно, в определенных средах его все еще можно использовать удивительным образом, но в современной веб-среде вам нужен CSS, чтобы выполнить свою работу.

Один из самых простых способов сделать ваш сайт почти мгновенным — это перенести CSS3-переходы в таблицу (каламбур). Поскольку пользователи взаимодействуют с различными элементами на вашей странице, переходы позволяют получить задержанный ответ, который является гораздо более естественным и интересным, чем резкий мгновенный ответ. Например, наведите курсор на эти две коробки и скажите, что для вас более интересно.

Перетащите это в HTML-документ и проверьте это:

[sourcecode language = ”html”]

<HTML>
<Голова>

<Стиль>
# box-static {width: 250px; Высота: 170 пикселей; цвет фона: # 999; цвет фона: # 999; плыть налево; Запас: 10px;}
# box-static: hover {background-color: # 333;}
# box-dynamic {width: 250px; Высота: 170 пикселей; цвет фона: # 999; цвет фона: # 999; плыть налево; Маржа: 10px; переход: все 1с;}
# box-dynamic: hover {background-color: # 333;}

</ Стиль>

</ HEAD>
<Тело>

<div id = «box-container» style = «ширина: 600px; высота: 200px; отображение: блок;»>

<div id = «box-static»> </ div> <div id = «box-dynamic»> </ div>
</ DIV>

</ Body>
</ Html>

[/исходный код]

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

Псевдоклассы для CSS-переходов

Ключом к тому, чтобы заставить CSS-переходы работать, является использование псевдоклассов. Вы видели это раньше, даже если не знали, как они назывались. Наиболее распространенный пример — это псевдокласс a: hover .

[sourcecode language = ”css”]

{
цвет: #ccc;
цвет фона: # 333;
}

a: hover {
цвет: # 333;
цвет фона: #ccc;
}

[/исходный код]

Здесь у нас есть элемент CSS для ссылки и псевдокласс «hover», когда мышь находится над ссылкой. Псевдоклассы являются подмножествами классов. Они автоматически принимают родительский CSS и применяют новый или другой CSS при взаимодействии.

Некоторые другие важные псевдоклассы, которые вы должны знать для CSS-переходов:

  • парить: очевидно.
  • активный: когда элемент нажимается
  • фокус: для выбора на основе вкладок (доступность и формы)
  • цель: для сопоставления идентификатора на странице с целью ссылки

Я не буду затрагивать целевой псевдокласс в этой статье, потому что он встречается редко и все еще содержит ошибки в разных браузерах. Но hover, active и focus полностью функциональны (IE10 +) и просты в реализации.

Представляем CSS-переходы

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

Вы можете использовать переходы практически для любого элемента CSS, используя псевдоклассы: div, параграфы, span, таблицы и вложенные элементы таблиц, изображений. Просто примените соответствующий псевдокласс и определите изменение CSS. Я придерживаюсь background-color по большей части, так как он создает интересный эффект.

Свойства CSS-перехода

Чтобы быть точным, приведенный выше пример просто объединяет несколько свойств CSS Transition:

  • Transition-свойство: CSS, который вы хотите использовать для перехода, например цвет, цвет фона, ширина, высота и т. Д.
  • Продолжительность перехода: сколько времени в секундах или миллисекундах вы хотите, чтобы переход занял.
    • Для секунд используйте ‘s’ как 2s
    • в течение миллисекунд используйте «мс», например 2000 мс
  • Функция перехода-хронометража: как происходит слияние перехода, что означает, что вы можете отрегулировать, чтобы иметь облегченный переход, ступенчатый или линейный. По умолчанию легкость, которая работает на 99% от того, что мне нужно, но вот основные атрибуты:
    • замедление запускает переход медленно и заканчивается на полной скорости
    • замедление запускает переход на полной скорости и заканчивается медленно
    • замедление начинается медленно, становится самым быстрым в середине перехода и заканчивается медленно.
    • легкость почти идентична легкости выхода, за исключением того, что она ближе к середине переходного периода
  • Задержка перехода: также в секундах или миллисекундах, определяет количество времени для задержки перед началом перехода.

Или вы можете объединить все это в один переход, просто храните их в следующем порядке:

[sourcecode language = ”text”]

переход: задержка функции времени-функции свойства;

[/исходный код]

Полный пример будет выглядеть так:

[sourcecode language = ”css”]

{
цвет: #ccc;
цвет фона: # 333;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}

a: hover {
цвет: # 333;
цвет фона: #ccc;
}

[/исходный код]

Обратите внимание, что вам нужно будет использовать -webkit-transition, чтобы они работали в подавляющем большинстве браузеров.

В псевдокоде это выглядело бы примерно так: измените цвет ссылки, сделайте переход за 1 секунду до завершения, аккуратно облегчите переход и переход и задержите его на полсекунды (500 мс) перед выполнением перехода.

Вы можете использовать список с разделителями-запятыми при переходе, чтобы охватить все целевые свойства, которые вы хотите. Я предпочитаю объединить мои переходы в единый атрибут CSS, но если у вас есть несколько очень специфических переходов, которые вы хотите создать, вы можете разбить каждый из них.

Где разместить переходы

Некоторое время я задавался вопросом, должен ли я поместить переход в родителя или ребенка. В конце концов, следующие два примера имеют одинаковый точный эффект:

[sourcecode language = ”css”]

{
цвет: #ccc;
цвет фона: # 333;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}

a: hover {
цвет: # 333;
цвет фона: #ccc;
}

[/исходный код]

-ИЛИ-

[sourcecode language = ”css”]

{
цвет: #ccc;
цвет фона: # 333;
}

a: hover {
цвет: # 333;
цвет фона: #ccc;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}

[/исходный код]

Но вот что я нашел, я предпочитаю поместить переход в родительский элемент, чтобы все остальные дочерние элементы получили переход. Если вам нужны отдельные эффекты в зависимости от ситуации, вы всегда можете предоставить другой переход, специфичный для этого элемента. Но я нахожу это чрезвычайно редким. В 99% случаев мне нужен постоянный эффект перехода, поэтому я помещаю переход в родительский элемент.

Вне: парение и ссылки

Два других действительно важных псевдокласса должны быть обсуждены для того, чтобы это было подробным руководством: активный и фокус.

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

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

Мой фокус обычно отражает мое зависание, просто потому, что они примерно одинаковы с точки зрения функциональности. Именно здесь может быть полезно отсрочить эффект на 250-500 миллисекунд, чтобы пользователи не перелистывали то, что может выглядеть как рождественская елка, так как каждый элемент с вкладками проходит переход.

Рабочий образец

Давайте соберем все эти концепции вместе в полный рабочий образец. Мне нравится использовать переходы на пунктах меню:

[sourcecode language = ”html”]
<HTML>
<Голова>
<Стиль>

/ * сделать li встроенным для горизонтального меню * /
# menu li {
отображения: встроенный;
Размер шрифта: 18px;
поле: 3px 8px 3px 8px;
}
/ * начальные определения * /
# menu a {
цвет: # 333;
Граница внизу: # 333 2px solid;
цвет фона: #fff;
обивка: 5px;
текст-отделка: нет;
переход: замедление цвета 1 с 250 мс, замедление фона 1 с 250 мс;
-webkit-transition: цвет 1 с замедлением 250 мс, фоновый цвет 1 с замедлением 250 мс;
}

# меню a: hover {
цвет: #fff;
цвет фона: # 666;
}

# меню a: focus {
цвет: #fff;
цвет фона: # 666;
}

/ * обратите внимание, как я сделал задержку перехода 0 мс * /
# menu a: active {
цвет: # 333;
цвет фона: # 666;
переход: 1с 0мс;
}

</ Стиль>

</ HEAD>

<Тело>
<div id = «menu»>
<UL>
<li> <a href=»#» tabindex=»1″> Навигационный текст 1 </a> </ li>
<li> <a href=»#» tabindex=»2″> Nav Text 2 </a> </ li>
<li> <a href=»#» tabindex=»3″> Nav Text 3 </a> </ li>
<li> <a href=»#» tabindex=»4″> Nav Text 4 </a> </ li>
<li> <a href=»#» tabindex=»5″> Nav Text 5 </a> </ li>
</ UL>
</ DIV>
</ Body>
</ Html>

[/исходный код]

Вы полагаетесь на CSS3 переходы в своих проектах? Будете ли вы использовать его для основной функциональности, или просто добавьте слой лака для тех, кто поддерживает его в современных браузерах?