Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Переходы


CSS3 Transitions

CSS3 переходы позволяет изменять значения свойств плавно (от одного значения к другому), в течение определенного срока.

Пример: Наведите курсор мыши на элемент ниже , чтобы увидеть CSS3 эффект перехода:

CSS3

Поддержка браузеров для переходов

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.

Имущество
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 Transitions?

Для создания эффекта перехода, необходимо указать две вещи:

  • свойство CSS вы хотите добавить эффект
  • длительность эффекта

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

Следующий пример показывает 100px * 100px красный <div> элемент. <div> элемент также указан эффект перехода для ширины собственности, с длительностью 2 секунды:

пример

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Эффект перехода начнется, когда заданное свойство CSS (ширина) изменяет значение.

Теперь, давайте указать новое значение ширины собственности , когда пользователь наводит мышь на <div> элемент:

пример

div:hover {
    width: 300px;
}
Попробуй сам "

Обратите внимание на то, что когда курсор мышки из элемента, он будет постепенно вернуться к своим оригинальным стилем.


Изменение Несколько значений свойств

Следующий пример добавляет эффект перехода как для ширины и высоты имущества, с длительностью 2 секунды для ширины и 4 секунды для высоты:

пример

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}
Попробуй сам "

Укажите скорость кривой перехода

transition-timing-function свойство задает кривую скорости эффекта перехода.

Свойство переходных сроков-функция может иметь следующие значения:

  • ease - определяет эффект перехода с медленного старта, то быстро, то медленно закончится (это по умолчанию)
  • linear - определяет эффект перехода с той же скоростью , от начала до конца
  • ease-in - определяет эффект перехода с медленного старта
  • ease-out - определяет эффект перехода с медленного конца
  • ease-in-out - определяет эффект перехода с медленным началом и концом
  • cubic-bezier(n,n,n,n) - позволяет определить свои собственные значения в cubic-bezier функции

Следующий пример показывает некоторые из различных кривых скорости, которые могут быть использованы:

пример

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Попробуй сам "

Задержка эффекта перехода

transition-delay свойство определяет задержку (в секундах) для эффекта перехода.

Следующий пример имеет 1 секундную задержку перед запуском:

пример

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
Попробуй сам "

Преобразование Переход +

Следующий пример также добавляет преобразование в переходный эффект:

пример

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
Попробуй сам "

Еще примеры Переходные

Свойства CSS3 переходов могут быть определены один за другим, как это:

пример

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
Попробуй сам "

или с помощью сокращённого свойства transition :

пример

div {
    transition: width 2s linear 1s;
}
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


Свойства CSS3 Переходные

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

Имущество Описание
transition Сокращённое свойство для установки четырех свойств перехода в одно свойство
transition-delay Определяет задержку (в секундах) для эффекта перехода
transition-duration Определяет, сколько секунд или миллисекунды эффект перехода требуется для завершения
transition-property Задает имя свойства CSS эффект перехода для
transition-timing-function Определяет скорость кривой эффекта перехода