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

Какие свойства CSS можно анимировать? 

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

• width, например, от 10em до 200em
• padding, например, от 0px до 10px
• color, например, от #F00 до #00F
• top, например, от 0px до 300px
• border-radius, например, от 10px до 3px
• transform, например, от rotate(0deg) до rotate(90deg)

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

Какие свойства CSS нельзя анимировать? 

Вот это может быть немного сложно. Например, в таком переходе, как:

#container p
{
    display: none;
    transition: all 3s ease;
}
#container:hover p
{
    display: block;
} 

Вы увидите резкий переход, как в CSS2.1, а не приятное появление элемента, потому что браузер не может определить промежуточные состояния.

Свойство display:none; удаляет блок со страницы так, как будто его никогда там и не было. Блок не может быть частично показан, он или показан, или не показан. Это же касается и свойства visibility, нельзя ожидать, что блок будет наполовину hidden, так что он по определению будет visible. К счастью, вместо этого можно использовать свойство opacity.

Следующая проблема: нельзя использовать размер auto, например:

#container p
{
    height: 0px;
    transition: all 3s ease;
}
#container:hover p
{
    height: auto;
}

Auto — не дискретный размер, так что браузер не может вычислить точки между нулем и неопределенным значением. Хотя можно воспользоваться хитрым обходным путем, использовав свойство max-height и задав ему значение выше настоящей высоты блока.

Подобным образом нельзя менять значение других свойств на auto для обработки движения. Такой пример тоже не сработает:

#container p
{
    left: 0px;
    right: auto;
    transition: all 3s ease;
}
#container:hover p
{
    left: auto;
    right: 0px;
}

И не ожидайте, что фоновое изображение волшебным образом перетечет из одной фотографии в другую. Возможно, это будет воплощено в дальнейшем.

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

Свойство transition-property определяет, к каким свойствам CSS применится переход, например:

#container p.one
{
    transition-property: color;
}

#container p.two
{
    transition-property: width;
}
#container p.three
{
    transition-property: color, width;
}

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

Длительность перехода 

Свойство transition-duration определяет длительность анимации в секундах s или миллисекундах ms – тысячных долях секунды. Следующие длительности одинаковые:

#container p.one
{
    transition-duration: 3s;
}
#container p.two
{
    transition-duration: 3000ms;
}

Временная характеристика перехода 

Свойство transition-timing-function определяет, как меняется скорость анимации с течением времени. Есть следующие возможные значения:

• ·      ease — задано по умолчанию, анимация начнется медленно, затем быстро ускорится. Дойдя до средины, она замедлится и будет замедляться до полной остановки.
• ·      ease-in-out — подобно предыдущей, но с менее выраженными ускорением и замедлением.
• ·      ease-in — начинается медленно, но ускоряется и останавливается резко.
• ·      ease-out — начинается быстро, но замедляется до остановки.
• linear — постоянная скорость на всей продолжительности анимации, часто наилучший выбор для изменения цвета или прозрачности.

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

Задержка перехода 

И, наконец, свойство transition-delay определяет период в секундах s или миллисекундах ms до момента начала перехода. Следующие значения одинаковы:

#container p.one
{
    transition-delay: 0.5s;
}
#container p.two
{
    transition-delay: 500ms;
}

Сокращенное объявление CSS 

Давайте рассмотрим полное объявление перехода:

#container p
{
    transition-property: all;
    transition-duration: 3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.5s;
}

И не забывайте об этих же свойствах с приставками производителей, такими как -webkit.

К счастью, можно сократить запись, используя свойство transition, которым можно задать свойство перехода, длительность перехода, временную характеристику перехода и задержку перехода в таком порядке, например:

#element
{
    /* starting state styles */
    color: #F00;
    -webkit-transition: all 3s ease-in-out 0.5s;
    transition: all 3s ease-in-out 0.5s;
}
#element:hover
{
    /* ending state styles */
    color: #00F;
}

Посмотрите демонстрацию работы этого перехода.

Выбор селектора 

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

#element,
#element:hover
{
    /* starting and ending state styles */
    -webkit-transition: all 3s ease-in-out 0.5s;
    transition: all 3s ease-in-out 0.5s;
}

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

В следующей части нашего цикла уроков мы детально рассмотрим временную характеристику перехода cubic-bezier.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также: