Войти
s-lub » Учебники » CSS 3 » Переходы в CSS 3

Переходы в CSS 3

Переходы в CSS 3

С помощью свойства transition в CSS 3 стало возможным создавать эффект перехода, для этого нужно указать какое свойство будет изменяться и с какой скоростью в секундах.

Стоит отметить, что браузера Safari требуется добавить префикс -webkit.

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

- transition - позволяет задать значения четырех различных свойств перехода в одном определении.

- transition-property - позволяет указать имя CSS свойства, к которому будет применен эффект перехода.

- transition-duration - позволяет указать время выполнения перехода (по умолчанию имеет значение 0).

- transition-timing-function - позволяет задать функцию смягчения отвечающую за плавность выполнения перехода (по умолчанию имеет значение 'ease').

- transition-delay - позволяет задать задержку перед началом выполнения перехода (по умолчанию имеет значение 0).

Теперь рассмотрим их на примере:

Пример 1

<html>
<style type='text/css'>
#wrap1
{
border:1px #000 solid;
width:200px;
padding:10px;
font-size:1.5em;
transition: width 4s;
-webkit-transition: width 4s; /* Safari*/
}
#wrap1:hover{width:500px;}
</style>
<body>
<div id="wrap1">Наведите на меня курсор мыши.</div>
<p><b>Обратите внимание:</b> после того, как курсор покинет границы элемента его ширина станет прежней.</p>
</body>
</html>

Пример 2:

<html>
<style type='text/css'>
#wrap1
{
border:1px #000 solid;
background-color:#E869AA;
color:#000;
width:200px;
padding:10px;
font-size:1.5em;
transition: color 4s, width 4s, background-color 4s;
-webkit-transition: color 4s, width 4s, background-color 4s; /* Safari*/
}
#wrap1:hover{
color:#FFFFFF;
width:400px;
background-color:#880045;}
</style>
<body>
<div id="wrap1">Наведите на меня курсор мыши.</div>
<p><b>Обратите внимание:</b> после того, как курсор покинет границы элемента его ширина станет прежней.</p>
</body>
</html>

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

Функции смягчения

Плавность выполнения переходов контролируется с помощью функций смягчения. В CSS3 существуют несколько видов таких функций:
- linear

- ease (функция смягчения по умолчанию)

- ease-in

- ease-out

- ease-in-out

- cubic-bezier(x,x,x,x) (поведение функции контролируется переданными параметрами)

Пример:

<html>
<head>
<style type="text/css">
div {
margin:3px;
padding:10px;
font-size:1.5em;
border:1px #000 solid;
width:230px;
transition:width 4s;
-moz-transition:width 4s;
-webkit-transition:width 4s;
-o-transition:width 4s;
}
div:hover {width:600px;}
#el1 {
transition-timing-function:linear;
-webkit-transition-timing-function:linear;
}
#el2 {
transition-timing-function:ease;
-webkit-transition-timing-function:ease;
}
#el3 {
transition-timing-function:ease-in;
-webkit-transition-timing-function:ease-in;
}
#el4 {
transition-timing-function:ease-out;
-webkit-transition-timing-function:ease-out;
}
#el5 {
transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
}
#el6 {
transition-timing-function:cubic-bezier(0.6,0.2,0.5,0.6);
-webkit-transition-timing-function:cubic-bezier(0.1,0.2,0.5,0.6);
}
</style>
</head>
<body>
<p>1. Наведите курсор на элементы ниже, чтобы увидеть соответствующие функции смягчения в действии.</p>
<div id="el1">linear</div>
<div id="el2">ease</div>
<div id="el3">ease-in</div>
<div id="el4">ease-out</div>
<div id="el5">ease-in-out</div>
<p>2. Поведение функции cubic-bezier зависит от переданных в нее значений (попробуйте ввести
несколько своих значений от 0 до 1, чтобы лучше понять ее принцип работы).</p>
<div id="el6">cubic-bezier(x,x,x,x)</div>
</body>
</html>

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


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение