Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Вибір Правильних Властивостей Переходу | Створення Плавних Переходів у CSS
Просунуті техніки CSS

bookВибір Правильних Властивостей Переходу

Можна вказати будь-яку CSS-властивість як значення для властивості transition-property. Це означає, що ефект переходу можна застосувати до будь-якої властивості.

transition-property: ... /* any property */

Розглянемо декілька типових властивостей, до яких застосовують переходи. Властивості transition-duration, transition-timing-function та transition-delay завжди залишаються незмінними. Усі переходи реагуватимуть на наведення курсору.

index.html

index.html

index.css

index.css

copy

Декілька властивостей переходу

Можна також використати значення all для властивості transition-property, що означає застосування переходу до всіх властивостей.

transition-property: all;

У наступному прикладі потрібно застосувати перехід до зміни властивостей background-color, color, font-weight та font-size. Перегляньте файл index.css:

index.html

index.html

index.css

index.css

copy

Також, якщо потрібно додати перехід до кількох властивостей, але не до всіх, їх можна вказати як значення для властивості transition-property, розділяючи пробілом. Наприклад:

transition-property: color border height;

Це означає, що перехід буде застосовано до властивостей color, border та height.

question mark

Що визначає властивість transition-property?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.04

bookВибір Правильних Властивостей Переходу

Свайпніть щоб показати меню

Можна вказати будь-яку CSS-властивість як значення для властивості transition-property. Це означає, що ефект переходу можна застосувати до будь-якої властивості.

transition-property: ... /* any property */

Розглянемо декілька типових властивостей, до яких застосовують переходи. Властивості transition-duration, transition-timing-function та transition-delay завжди залишаються незмінними. Усі переходи реагуватимуть на наведення курсору.

index.html

index.html

index.css

index.css

copy

Декілька властивостей переходу

Можна також використати значення all для властивості transition-property, що означає застосування переходу до всіх властивостей.

transition-property: all;

У наступному прикладі потрібно застосувати перехід до зміни властивостей background-color, color, font-weight та font-size. Перегляньте файл index.css:

index.html

index.html

index.css

index.css

copy

Також, якщо потрібно додати перехід до кількох властивостей, але не до всіх, їх можна вказати як значення для властивості transition-property, розділяючи пробілом. Наприклад:

transition-property: color border height;

Це означає, що перехід буде застосовано до властивостей color, border та height.

question mark

Що визначає властивість transition-property?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2
some-alt