Во второй части этой серии о переходах CSS3 мы подробно рассмотрим свойства. Но сначала нам нужно знать, что можно, а что нельзя оживлять …
Какие свойства CSS можно анимировать?
В общем, переход может быть применен к любому свойству CSS, которое имеет дискретное значение, которое изменяется между начальным и конечным состояниями. Как правило, это включает в себя свойства макета (ширина, высота, отступы, поля, границы), позиционные свойства (слева, справа, сверху, снизу), преобразования, размеры шрифта, цвета, цвета фона и прозрачности …
-
width, например, от 10 до 200 пикселей -
padding, например, от 0 до 10 пикселей -
color, например, от # F00 до # 00F -
top, например, от 0 до 300 пикселей -
border-radius, например, от 10 до 3 пикселей -
transform, например, повернуть (0 градусов), чтобы повернуть (90 градусов)
Вы также можете применять переходы к цветным ключевым словам, таким как бордовый, фуксия и бирюзовый, поскольку они эффективно переводятся в значения RGB.
Какие свойства CSS не могут быть анимированы?
Вот где это может быть немного сложно. Если вы похожи на меня, то первый переход, который вы попробовали, был примерно таким:
#container p { display: none; transition: all 3s ease; } #container:hover p { display: block; }
Вместо того, чтобы красиво добавить элемент, вы увидите резкий переход, как в CSS2.1. Причина: браузер не может определить промежуточные состояния .
display:none; удаляет блок со страницы, как будто его там никогда не было Блок не может быть частично отображен; либо есть, либо нет. То же самое верно для visibility ; Вы не можете ожидать, что блок будет наполовину hidden который, по определению, будет visible ! К счастью, вы можете использовать opacity для эффектов затухания.
Следующая проблема: вы не можете полагаться на «автоматическое» измерение, например
#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; }
Наконец, не ожидайте, что фоновое изображение волшебным образом из одной фотографии в другую. Есть вероятность, что это будет реализовано в будущем, и некоторые поставщики имели ограниченный успех с CSS3-градиентами, но, вероятно, этого пока лучше избегать.
переход-недвижимость
Свойство 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 указывает период анимации в секундах (с) или миллисекундах (мс) — тысячные доли секунды. Следующие длительности идентичны:
#container p.one { transition-duration: 3s; } #container p.two { transition-duration: 3000ms; }
переходное время функция
Функция transition-timing-function определяет, как анимация изменяется по скорости на протяжении всей продолжительности. Есть несколько возможных значений:
- легкость — по умолчанию; анимация начинается медленно, а затем быстро ускоряется. В средней точке он замедляется и замедляется до остановки.
- easy-in-out — похож на easy, но с более тонким ускорением и замедлением.
- замедление — начинается медленно, но ускоряется и резко останавливается.
- замедление — начинается быстро, но замедляется до остановки.
- linear — постоянная скорость на протяжении всей анимации; часто лучше всего использовать для изменения цвета или непрозрачности.
Наконец, у нас есть cubic-bezier который позволяет вам определить свою собственную странную и замечательную функцию синхронизации. Это немного сложно, поэтому мы вернемся к нему в следующей части этой серии.
Переход задержки
Наконец, transition-delay указывает период в секундах (с) или миллисекундах (мс) до начала перехода. Следующее идентично:
#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; }
Просмотрите страницу примера, используя этот переход …
Выбор селектора
Во всех этих примерах я определил transition CSS в стандартном (не размещенном) CSS-селекторе. Однако это будет :hover селектора :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 более подробно.