Властивості, що анімуються

Оновлено: 20.01.2023

Властивості, що анімуються

Тут перераховані властивості, які можуть бути анімовані за допомогою властивостей animation та transition. Іншими словами, плавно протягом часу змінювати своє значення.

Для решти властивостей анімація працювати не буде.

  • all

    all

    Універсальна властивість, яка скидає всі значення властивостей у вихідні або успадковані, за винятком властивостей direction і unicode-bidi.

  • background

    background

    Універсальна властивість background дає змогу встановити одночасно кілька характеристик фону. Значення можуть іти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібній властивості. Для докладного ознайомлення дивіться інформацію про кожну властивість окремо. Припустимо, також, вказувати параметри одразу декількох фонів, перераховуючи їх через кому.

  • background-color

    background-color

    Визначає колір фону елемента. Хоча ця властивість не успадковує властивості свого батьківського елемента, через те, що початкове значення встановлюється прозорим, колір фону дочірніх елементів збігається з кольором фону батьківського елемента.

  • background-position

    background-position

    Задає початкове положення фонового зображення, встановленого за допомогою властивості background-image. Припустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.

  • background-position-x

    background-position-x

    Задає положення фонового зображення всередині елемента по горизонталі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.

  • background-position-y

    background-position-y

    Задає положення фонового зображення всередині елемента по вертикалі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.

  • background-size

    background-size

    Масштабує фонове зображення, згідно із заданими розмірами.

  • block-size

    block-size

    Визначає розмір елемента за блоковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і block-size встановлює висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і block-size встановлює ширину елемента.

  • border

    border

    Універсальна властивість border дає змогу одночасно встановити товщину, стиль і колір кордону навколо елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості. Для встановлення межі тільки на певних сторонах елемента, скористайтеся властивостями border-top, border-bottom, border-left, border-right.

  • border-bottom

    border-bottom

    Властивість дає змогу одночасно встановити товщину, стиль і колір межі внизу елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості

  • border-bottom-color

    border-bottom-color

    Встановлює колір кордону внизу елемента.

  • border-bottom-left-radius

    border-bottom-left-radius

    Встановлює радіус заокруглення лівого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

  • border-bottom-right-radius

    border-bottom-right-radius

    Встановлює радіус заокруглення правого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

  • border-bottom-width

    border-bottom-width

    Встановлює товщину кордону внизу елемента.

  • border-color

    border-color

    Встановлює колір кордону на різних сторонах елемента. Властивість дає змогу задати колір кордону одразу для всіх сторін елемента або тільки для зазначених.

  • border-left

    border-left

    Властивість border-left дає змогу одночасно встановити товщину, стиль і колір лівої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

  • border-left-color

    border-left-color

    Задає колір кордону ліворуч від елемента.

  • border-left-width

    border-left-width

    Встановлює товщину кордону ліворуч від елемента.

  • border-radius

    border-radius

    Встановлює радіус заокруглення куточків рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

  • border-right

    border-right

    Властивість border-right дає змогу одночасно встановити товщину, стиль і колір правої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

  • border-right-color

    border-right-color

    Задає колір кордону праворуч від елемента.

  • border-right-width

    border-right-width

    Встановлює товщину межі праворуч від елемента.

  • border-top

    border-top

    Властивість border-top дає змогу одночасно встановити товщину, стиль і колір межі зверху елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

  • border-top-color

    border-top-color

    Задає колір межі зверху елемента.

  • border-top-left-radius

    border-top-left-radius

    Встановлює радіус заокруглення лівого верхнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

  • border-top-right-radius

    border-top-right-radius

    Встановлює радіус заокруглення правого верхнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

  • border-top-width

    border-top-width

    Устанавливает толщину границы сверху элемента.

  • border-width

    border-width

    Задає товщину рамки одночасно на всіх сторонах елемента або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа значень.

  • bottom

    bottom

    Встановлює положення нижнього краю вмісту елемента без урахування товщини рамок і відступів. Відлік координат залежить від властивості position, вона зазвичай приймає значення relative (відносне положення) або absolute (абсолютне положення).

  • box-shadow

    box-shadow

    Додає тінь до елемента. Допускається використовувати кілька тіней, вказуючи їхні параметри через кому, під час накладення тіней перша тінь у списку буде вищою, остання нижчою. Якщо для елемента задається радіус заокруглення через властивість border-radius, то тінь також вийде із закругленими куточками. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокрутки в браузері.

  • caret-color

    caret-color

    Задає колір текстового курсору, який відображається в текстових полях форми (<input>, <textarea>), а також для елементів з атрибутом contenteditable. Такий курсор за аналогією з друкарськими машинками також називається кареткою і показує місце введення наступного символу. Як правило, текстовий курсор має вигляд вертикальної миготливої лінії.

  • clip

    clip

    Властивість clip визначає область позиціонованого елемента, в якій буде показано його вміст. Усе, що не поміщається в цю область, буде обрізано і стає невидимим. Наразі єдина доступна форма області - прямокутник.

  • color

    color

    Визначає колір тексту елемента.

  • column-count

    column-count

    Визначає кількість колонок у багатоколонному тексті.

  • column-rule

    column-rule

    У багатоколоночному тексті відмальовує лінію між колонок і визначає її параметри.

  • column-rule-color

    column-rule-color

    У багатоколоночному тексті задає колір ліній між колонок. Якщо такий колір явно не вказано, то колір тексту в колонках і колір ліній між ними збігається.

  • column-rule-width

    column-rule-width

    У багатоколоночному тексті задає товщину ліній між колонок.

  • columns

    columns

    Універсальна властивість, яка дає змогу одночасно задати ширину і кількість колонок багатоколонкового тексту.

  • filter

    filter

    Властивість filter призначена для застосування до елементів художніх ефектів. Зазвичай використовується для зображень, щоб розмити їх, збільшити контрастність, перетворити на чорно-білу картинку та ін.

  • flex

    flex

    Скорочена властивість, яка дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір. Елементи можуть бути розтягнутими пропорційно з урахуванням заданого співвідношення або стиснутими так, щоб повністю вмістити всі елементи в один рядок без перенесення.

  • flex-basis

    flex-basis

    Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента. Схоже на властивості width та height, до яких додається вміст елемента.

  • flex-grow

    flex-grow

    Визначає, скільки простору може займати флекс усередині контейнера. За значення беруться числа, вони задають пропорції кожного флексу. Наприклад, якщо для всіх елементів встановлено значення 1, всі вони вийдуть однакового розміру. Якщо якийсь елемент отримав значення 2, його розмір буде вдвічі більшим від інших.

  • flex-shrink

    flex-shrink

    Встановлює коефіцієнт стиснення флексів у контейнері та задає, наскільки елемент зменшуватиметься відносно інших флексів, щоб розмістити всі елементи в один рядок.

  • font

    font

    Універсальна властивість, що дозволяє одночасно задати кілька характеристик шрифту та тексту.

  • font-size

    font-size

    Визначає розмір елемента шрифту. Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) визначає розмір, який називається абсолютним. Правду кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи.

  • font-stretch

    font-stretch

    Встановлює вузьке, нормальне або широке зображення шрифту, що дозволяє розширювати текст або робити його більш щільним.

  • font-weight

    font-weight

    Встановлює насиченість шрифту. Значення вказується у вигляді чисел від 100 до 900 з кроком 100 або за допомогою ключових слів.

  • height

    height

    Встановлює висоту вмісту елемента. За замовчуванням висота визначається автоматично, виходячи з вмісту елемента, але якщо задати фіксоване значення висоти, то вона буде встановлена, незважаючи на обсяг вмісту. Якщо вміст елемента перевищує вказане значення висоти, то висота елемента залишиться незмінною, а вміст відображатиметься поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML ідуть послідовно. Щоб цього не сталося, додайте властивість overflow зі значенням auto до стилю елемента.

  • inline-size

    inline-size

    Визначає розмір елемента за рядковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального листа (writing-mode: horizontal-tb) рядкова вісь буде горизонтальною, inline-size встановлює ширину елемента. Для вертикального напрямку письма (writing-mode: vertical-lr та writing-mode: vertical-rl) рядкова вісь буде вертикальною, inline-size встановлює висоту елемента.

  • left

    left

    Для позиціонованого елемента визначає відстань від лівого краю батьківського елемента, не враховуючи відступ, поле і ширину рамки, до лівого краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батьківського елементу виступає вікно браузера і положення елемента визначається від його лівого краю (рис. 1).

  • letter-spacing

    letter-spacing

    Визначає інтервал між символами в межах елемента. Браузери зазвичай встановлюють відстань між символами, виходячи з типу і виду шрифту, його розмірів і налаштувань операційної системи. Щоб змінити це значення і застосовується ця властивість. Припустимо використовувати від'ємне значення, але в цьому випадку треба переконатися, що зберігається читабельність тексту.

  • line-height

    line-height

    Для блокових елементів визначає мінімальну висоту рядка тексту. Для вбудованих рядкових елементів (на кшталт <img>) властивість line-height не має жодного ефекту. Для решти рядкових елементів line-height задає висоту, яка використовується для розрахунку висоти рядка блоку.

  • margin

    margin

    Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

  • margin-bottom

    margin-bottom

    Встановлює величину відступу від нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

  • margin-left

    margin-left

    Встановлює величину відступу від лівого краю елемента. Відступом є відстань від зовнішнього краю лівої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

  • margin-right

    margin-right

    Встановлює величину відступу від правого краю елемента. Відступом є відстань від зовнішнього краю правого краю поточного елемента до внутрішнього краю його батьківського елемента (рис. 1).

  • margin-top

    margin-top

    Встановлює величину відступу від верхнього краю елемента. Відступом є відстань від зовнішнього краю верхньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

  • max-height

    max-height

    Встановлює максимальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від значень встановлених властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

  • max-width

    max-width

    Встановлює максимальну ширину елемента. Значення ширини елемента обчислюватиметься залежно від значень установлених властивостей width, max-width і min-width. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

  • min-block-size

    min-block-size

    Визначає мінімальний розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і min-block-size встановлює мінімальну висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і min-block-size встановлює мінімальну ширину елемента.

  • min-height

    min-height

    Задає мінімальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від установлених значень властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

  • min-width

    min-width

    Встановлює мінімальну ширину елемента. Якщо вікно браузера за шириною стає меншим за задану мінімальну ширину елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

  • opacity

    opacity

    Визначає рівень прозорості елемента веб-сторінки. За часткової або повної прозорості через елемент проступає фоновий малюнок або інші елементи, розташовані нижче напівпрозорого об'єкта.

  • order

    order

    Визначає порядок виведення флексів усередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. За рівних значень order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.

  • outline

    outline

    Універсальна властивість, що одночасно встановлює колір, стиль і товщину зовнішньої межі на всіх чотирьох сторонах елемента. На відміну від лінії, що задається через border, у властивості outline є такі особливості:

  • outline-color

    outline-color

    Вказує колір зовнішньої межі елемента. На відміну від лінії, що задається через border, лінія через властивість outline відображається навколо елемента, не впливаючи на ширину блоку або його положення.

  • Іoutline-offset

    Іoutline-offset

    Встановлює відстань між рамкою, створеною за допомогою властивості outline, і краєм або межею елемента, доданою через border.

  • outline-width

    outline-width

    Визначає товщину зовнішньої межі елемента. На відміну від властивості border-width, для outline-width не можна задати межу для кожної сторони елемента індивідуально.

  • padding

    padding

    Встановлює значення полів навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

  • padding-block

    padding-block

    Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по блоковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і padding-block встановлює відступи зверху та знизу. Для вертикального напряму письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і padding-block встановлює відступи зліва та справа.

  • padding-block-end

    padding-block-end

    Визначає кінцевий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-end може відповідати властивості padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-block-end у поєднанні з іншими властивостями.

  • padding-block-start

    padding-block-start

    Визначає початковий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-start може відповідати властивості padding-top, padding-right, padding-left. У табл. 1 показано положення padding-block-start у поєднанні з іншими властивостями.

  • padding-bottom

    padding-bottom

    Встановлює значення поля від нижнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

  • padding-inline

    padding-inline

    Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по рядковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строкова вісь буде горизонтальною і padding-inline встановлює відступи зліва та справа. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) строкова вісь буде вертикальною, а padding-inline встановлює відступи зверху та знизу.

  • padding-inline-end

    padding-inline-end

    Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-end може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-end у поєднанні з іншими властивостями.

  • padding-inline-start

    padding-inline-start

    Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-start може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-start у поєднанні з іншими властивостями.

  • padding-left

    padding-left

    Встановлює значення поля від лівого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

  • padding-right

    padding-right

    Встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

  • padding-top

    padding-top

    Встановлює значення поля від верхнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

  • perspective

    perspective

    Визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності за замовчуванням розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.

  • perspective-origin

    perspective-origin

    Задає координати точки, куди дивиться спостерігач. Ця властивість працює спільно з властивістю perspective і визначає точку збіжності ліній під час перспективи.

  • right

    right

    Для позиціонованого елемента визначає відстань від правого краю батьківського елемента, не враховуючи відступ, поле і ширину рамки, до правого краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батьківського елементу виступає вікно браузера і положення елемента визначається від його правого краю (рис. 1). У разі значення relative, right відраховується від правого краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від правого краю батьківського (рис. 2).

  • text-decoration

    text-decoration

    Додає оформлення тексту у вигляді його підкреслення, перекреслення або лінії над текстом. Одночасно можна застосувати більше одного стилю, перераховуючи значення через пробіл.

  • text-decoration-color

    text-decoration-color

    Встановлює колір лінії, яка додається через властивість text-decoration.

  • text-indent

    text-indent

    Встановлює величину відступу першого рядка блоку тексту (наприклад, для абзацу <p>). Впливу на всі інші рядки не чинить. Допускається від'ємне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.

  • text-shadow

    text-shadow

    Додає тінь до тексту, а також встановлює її параметри: колір тіні, зміщення щодо напису та радіус розмиття. Властивість text-shadow може працювати спільно з псевдоелементами :first-letter і :first-line.

  • top

    top

    Для позиціонованого елемента визначає відстань від верхнього краю батьківського елемента до верхнього краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батька виступає вікно браузера, і положення елемента визначається від його верхнього краю (рис. 1). У разі значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батьківського (рис. 2).

  • transform

    transform

    Трансформує елемент, зокрема, дає змогу його масштабувати, обертати, зрушувати, нахиляти, а також комбінувати види трансформацій, перераховуючи функції трансформації через пробіл.

  • transform-origin

    transform-origin

    Встановлює координати точки, щодо якої відбуватиметься трансформація елемента.

  • vertical-align

    vertical-align

    Вирівнює елемент по вертикалі відносно свого батька, навколишнього тексту або комірки таблиці.

  • visibility

    visibility

    Призначений для відображення або приховування елемента, включно з рамкою навколо нього і тлом. Під час приховування елемента, хоча його і стає не видно, місце, яке елемент займає, залишається за ним. Якщо передбачається виведення різних елементів в одне й те саме місце екрана, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.

  • width

    width

    Встановлює ширину вмісту елемента. За замовчуванням ширина залежить від типу елемента: блокові займають усю доступну ширину; ширина рядково-блокових дорівнює ширині їхнього вмісту. Властивість width дає змогу явно задати бажану ширину елемента, незважаючи на його вихідну поведінку.

  • word-spacing

    word-spacing

    Встановлює інтервал між словами. Якщо для тексту задано вирівнювання через text-align зі значенням justify (вирівнювання по ширині), то інтервал між словами буде встановлено примусово, але не менше за значення, зазначене через word-spacing.

  • z-index

    z-index

    Будь-які позиціоновані елементи на веб-сторінці можуть накладатися один на одного в певному порядку, імітуючи тим самим третій вимір, перпендикулярний до екрана. Кожен елемент може розташовуватися як нижче, так і вище за інші об'єкти веб-сторінки, їхнім розміщенням за z-віссю і керує z-index. Ця властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative.