Плавные переходы в CSS3.
Всем здравия! В этой статье мы разберём, как делать плавные переходы на CSS3, используя свойство transition.
Давайте подумаем, как сделать, чтобы, например, при наведении на какой-нибудь блок, он менял цвет текста, фона и тени плавно? Думаю, что многие сейчас ответят, что без скриптов тут не обойтись, но это не так! На помощь нам приходит свойство transition. Давайте поговорим, какие есть параметры у этого свойства.
transition-property: background;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease;
В transition-property мы должны указать, что именно мы хотим анимировать. Например, background. Если вы хотите анимировать сразу все свойства css, то задайте значение all.
transition-duration задаёт время, которое будет длиться анимация. В нашем случае 2 секунды.
transition-delay задаёт задержку перед анимацией. Т.е. анимация произойдёт не сразу, а лишь спустя 1 секунду в нашем случае.
Теперь поговорим о transition-timing-function. Он может иметь несколько значений:
- linear - эффект, при котором анимация будет длиться с одинаковой скоростью
- ease - эффект, при котором анимация начнётся медленно, затем ускорится, а в конце снова замедлится
- ease-in - эффект с замедленным началом
- ease-out - эффект с замедленным концом
- ease-in-out - эффект с замедленным началом и концом
- cubic-bezier(n,n,n,n) - тут можно указать какие-нибудь свои значения от 0 до 1
Чтобы не рассписывать всё так длинно, есть сокращённая форма
transition: background 2s ease 1s;
Думаю, тут всё понятно. Сначала указываем, что мы анимируем, потом сколько времени будет длиться анимация, какой эффект применять и задержка перед анимацией(её может и не быть).
Мы рассмотрели свойство transition и теперь давайте закрепим наши знания на практике. Для этого анимируем div.
HTML разметка<html>
<head>
<title>transition</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">Кнопка клац!</div>
</body>
</html>
Теперь зададим ему стили, а затем я поясню
.block {
width: 110px;
padding: 15px 3px;
background: #ccc;
color: #fff;
text-align: center;
border-radius: 7px;
font: 17px "Tahoma";
}
Вот, что у нас получилось:
Теперь зададим стили при наведении
.block:hover {
background: #fafafa;
color: #ccc;
box-shadow: 1px 3px 5px #ccc;
}
Сейчас стили меняются, но не плавно, а резко. Чтобы это исправить, добавим только что изученное свойство transition.
.block: hover {
/* ... стили */
transition: all .5s ease-in-out;
}
Теперь при наведении стили будут меняться плавно, но когда вы отведёте мышку, то стили вернутся на первоначальные значения резко. Чтобы это исправить, добавим transition также к нашему блоку.
.block {
/* ... стили */
transition: all .5s ease-in-out;
}
На этом всё для этой статьи. Обязательно попробуйте придумать себе какой-нибудь пример и сделать его, чтобы закрепить знания, которые вы получили сейчас. Удачи!
-
Создано 09.04.2014 18:01:18
-
Михаил Русаков
Комментарии (4):
В Ie 10 не работает.
Ответить
Я так понимаю HTML5 CSS3 и JS заменит флеш.
Ответить
Не работает даже на етой странице
Ответить
Добрый вечер. Хочу сделать так чтобы при загрузке сайта стили к блоку применялись плавно. Прописываю эти свойства к блоку но не работает (все стили применяются сразу а не плавно). А вот если поставить :hover и в этом селекторе прописать этот код, то стили при наведении применяться будут плавно. Как сделать так чтоб без наведения а просто при загрузке страницы стили плавно переменялись (так как если просто прописать у блока нужный код то работать плавность не будет).
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.