CSS3 переходы
CSS3 переходы
CSS3, мы должны добавить эффект, который может быть преобразован из одного стиля к другому времени, без использования Flash-анимации или JavaScript. Наведите курсор мыши на следующие элементы:
Наведите курсор мыши на следующие элементы:
переход
Поддержка браузеров
Цифры в таблице представляют первый браузер для поддержки номер версии имущества.
Сразу же после цифровой -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 секунды:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Примечание: Если выне указываете лимит времени, переход не будет иметь никакого эффекта, так как значение по умолчанию равно 0.
Эффект будет изменить значение указанных изменений свойств CSS. Типичное изменение CSS свойство пользователь мыши над элементом:
примеров
Положения, когда указатель мыши подвеска (: зависать) к элементу <div>, когда:
{
ширина: 300px;
}
Попробуйте »
Примечание: Когда курсор мыши к элементу, он постепенно меняет свой оригинальный стиль
Количество изменений
Чтобы добавить более одного эффекта изменения стиля, добавлять атрибуты, разделенные запятыми:
примеров
Добавлены эффекты ширина, высота, и переходный период:
{
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 |
Следующие два примера установить все атрибуты перехода:
примеров
Используйте все свойства переходов в одном примере:
{
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;
}
Попробуйте »
примеров
И примеры тех же эффектов перехода выше, но использует обобщающего свойства перехода:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Попробуйте »