Курс CSS. Урок 51. CSS3. Преобразования. Transitions.
Очень полезное свойство transitions (преобразования) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash.
Поиграйтесь с блоком выше, нажимая кнопки "Анимировать" и "Восстановить".
Теперь затронем теорию вопроса.
Технология свойства transition (преобразование).
Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому.
Для получения требуемого эффекта необходимо сделать следующее:
В данном примере это происходит при наведении курсора на объект и при клике по объекту (не отпуская левую кнопку мыши).
Обратите внимание, что при этом высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
Рассмотрим классы объекта, чтобы совсем все стало понятно.
Изображению заданы свойства ширины и высоты, и продолжительность эффекта в 1 секунду, ЕСЛИ будет изменяться ширина.
При наведении мыши высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
Это благодаря тому, что ранее мы задали:
transition: width 1s;
А насчет height (высота) такого условия не было, потому она меняется быстро, без эффекта.
И еще имеется класс при клике мышкой (следует кликнуть и не отпускать кнопку мыши).
И опять же, как и при наведении мыши - при клике (не отпуская кнопку мыши) высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
А вот если необходимо, чтобы эффекты действовали на несколько стилей, можно задавать эффекты для нескольких свойств, разделяя запятыми, например:
transition: width 1s, height 1s;
Выше мы рассматривали возможности короткой записи свойства transition (преобразование).
В таблице ниже представлены описания всех свойств, относящихся к transition (преобразование).
Пример использование всех свойств относящихся к transition (преобразованию).
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_051_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_051_001.zip ← скачайте пример, чтобы установить на свой сайт...
Он иногда читает Оле
Нравоучительный роман,
В котором автор знает боле
Природу, чем Шатобриан,
А между тем две, три страницы
(Пустые бредни, небылицы,
Опасные для сердца дев)
Он пропускает, покраснев.
Уединясь от всех далеко,
Они над шахматной доской,
На стол облокотясь, порой
Сидят, задумавшись глубоко,
И Ленской пешкою ладью
Берет в рассеяньи свою.
Нравоучительный роман,
В котором автор знает боле
Природу, чем Шатобриан,
А между тем две, три страницы
(Пустые бредни, небылицы,
Опасные для сердца дев)
Он пропускает, покраснев.
Уединясь от всех далеко,
Они над шахматной доской,
На стол облокотясь, порой
Сидят, задумавшись глубоко,
И Ленской пешкою ладью
Берет в рассеяньи свою.
Поиграйтесь с блоком выше, нажимая кнопки "Анимировать" и "Восстановить".
Теперь затронем теорию вопроса.
| NN | Свойство | Гугль Хром | FireFox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| 137 | transition | 26 | 16 | 10 | -webkit- | 12.1 |
| 138 | transition-property | 26 | 16 | 10 | -webkit- | 12.1 |
| 139 | transition-duration | 26 | 16 | 10 | -webkit- | 12.1 |
| 140 | transition-timing-function | 26 | 16 | 10 | -webkit- | 12.1 |
| 141 | transition-delay | 26 | 16 | 10 | -webkit- | 12.1 |
Технология свойства transition (преобразование).
Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому.
- Определить свойство CSS к которому мы желаем добавить эффект.
- Определить продолжительность эффекта в секундах.
В данном примере это происходит при наведении курсора на объект и при клике по объекту (не отпуская левую кнопку мыши).
Обратите внимание, что при этом высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
Рассмотрим классы объекта, чтобы совсем все стало понятно.
.pics_051 {
width:50px;
height:50px;
transition: width 1s;
-webkit-transition: width 1s; /* Safari */
}
Изображению заданы свойства ширины и высоты, и продолжительность эффекта в 1 секунду, ЕСЛИ будет изменяться ширина.
.pics_051:hover {
width:100px;
height:100px;
cursor:pointer;
}
При наведении мыши высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
Это благодаря тому, что ранее мы задали:
transition: width 1s;
А насчет height (высота) такого условия не было, потому она меняется быстро, без эффекта.
И еще имеется класс при клике мышкой (следует кликнуть и не отпускать кнопку мыши).
.pics_051:active {
width:300px;
height:300px;
}
И опять же, как и при наведении мыши - при клике (не отпуская кнопку мыши) высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.
А вот если необходимо, чтобы эффекты действовали на несколько стилей, можно задавать эффекты для нескольких свойств, разделяя запятыми, например:
transition: width 1s, height 1s;
Выше мы рассматривали возможности короткой записи свойства transition (преобразование).
В таблице ниже представлены описания всех свойств, относящихся к transition (преобразование).
| NN | Свойство | Описание |
|---|---|---|
| 1 | transition | Сокращенная запись, которая позволяет установить до 4 свойств относящихся к преобразованию в одно простое свойство. |
| 2 | transition-property | Определяет свойство CSS, к которому относится преобразование. |
| 3 | transition-duration | Определяет продолжительность процесса преобразования в секундах. По умолчанию 0. |
| 4 | transition-timing-function | Определяет каким способом будет проведен расчет продолжительности процесса преобразования. По умолчанию "ease". |
| 5 | transition-delay | Определяет задержку перед стартом преобразования в секундах. По умолчанию 0. |
Пример использование всех свойств относящихся к transition (преобразованию).
#sample_51_1 {
width:100px;
height:100px;
background:#D7FFEA;
margin:0px auto 0px auto;
text-align:center;
border:3px solid #B7F777;
border-radius:10px;
box-shadow: 6px 7px 5px #979797;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
}
#sample_51_1:hover {
width:100%;
}
Наведите на меня мышь и ждите...
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_051_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_051_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
