CSS3 переходы

CSS3, мы должны добавить эффект, который может быть преобразован из одного стиля к другому времени, без использования Flash-анимации или JavaScript. Наведите курсор мыши на следующие элементы:

Наведите курсор мыши на следующие элементы:

CSS3
переход

Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии имущества.

Сразу же после цифровой -webkit-, -ms- или -moz- назад в поддержку префикса атрибута первый номер версии браузера.

属性
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Как это работает?

Переход CSS3 является элементом постепенно меняться от одного стиля к другому эффекту.

Для достижения этой цели, две вещи должны быть определены:

Я хочу, чтобы добавить эффект свойств CSS
Укажите длительность эффекта.

примеров

Ширина атрибут применяется эффект перехода, длительность 2 секунды:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Примечание: Если выне указываете лимит времени, переход не будет иметь никакого эффекта, так как значение по умолчанию равно 0.

Эффект будет изменить значение указанных изменений свойств CSS. Типичное изменение CSS свойство пользователь мыши над элементом:

примеров

Положения, когда указатель мыши подвеска (: зависать) к элементу <div>, когда:

ДИВ: парить
{
ширина: 300px;
}

Попробуйте »

Примечание: Когда курсор мыши к элементу, он постепенно меняет свой оригинальный стиль

Количество изменений

Чтобы добавить более одного эффекта изменения стиля, добавлять атрибуты, разделенные запятыми:

примеров

Добавлены эффекты ширина, высота, и переходный период:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

Попробуйте »

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

В следующей таблице перечислены все свойства перехода:

свойство	описание	CSS
переход	Сокращённое свойство для установки четырех свойств перехода в одно свойство.	3
переход-недвижимость	Название перехода CSS собственности положения применяются.	3
переходных продолжительность	Для определения времени переходного эффекта, потраченное. Значение по умолчанию равно 0.	3
переходных сроков-функция	Предустановленное перехода времени эффект кривой. По умолчанию это "легкость".	3
Переход задержки	Положения, когда начать эффект перехода. Значение по умолчанию равно 0.	3

Следующие два примера установить все атрибуты перехода:

примеров

Используйте все свойства переходов в одном примере:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Попробуйте »