Home

Animation, trasition

Зміст

  1. Позиційовані елементи
  2. Властивість z-index
  3. Властивість overflow
  4. Заокруглене зображення
  5. Декоративний оверлей
  6. CSS-переходи -transition-
  7. Анімовані властивості - opacity і transform
  8. Перспектива

Позиційовані елементи

position
position: static | relative | absolute | fixed | sticky | inherit

За замовчуванням елементи на сторінці розташовуються зліва направо і зверху вниз. А як зробити напис на зображенні товару, показати один елемент поверх іншого при ховері або змусити меню завжди бути прикріпленим до верхньої частини в'юпорту, навіть під час скролу? Для вирішення подібних завдань існує властивість position, що дозволяє буквально підняти елемент і розмістити його поверх будь-якого іншого. Статичне позиціонування (static) - це початковий стан всіх елементів веб-сторінки. Блокова модель і флексбокс розташовують елементи саме в цьому статичному потоці сторінки. Відносне (relative), абсолютне (absolute) і фіксоване (fixed) позиціонування дозволяють підняти елемент над потоком сторінки і вручну його позиціонувати, використовуючи систему координат, початок якої залежить від типу позиціонування

Властивість position

  • position: static

    За замовчуванням встановлено значення static. Для зазначення положення елемента використовуються властивості top, left, bottom або right, які застосовуються до елементів без position


  • position: relative

    Елемент, значення властивості position якого відрізняється від static, називається «позиційований елемент» Під час використання відносного позиціонування елемент залишається в потоці сторінки, тобто сусідні елементи не займають його місце. Проте, візуально елемент можна зсунути щодо його оригінального положення, водночас він може перекривати сусідів/ Властивості top, left, bottom і right дозволяють вказати зміщення елемента (візуальне) щодо його вихідного положення. Можуть приймати від'ємні значення.


  • position: absolute

    Під час використання абсолютного позиціонування елемент виривається з потоку сторінки, тобто сусідні елементи займають його місце. Відлік значень top, left, bottom і right для абсолютно позиційованого елемента ведеться щодо найближчого предка з позиціонуванням, відмінного від статичного. Якщо такого предка не буде, то відлік буде здійснюватися від меж елемента body

    adorable-animal-blur-cat

    Cat


  • position: fixed

    У разі фіксованого позиціонування, елемент вилучається з потоку сторінки і позиціонується щодо в'юпорту (вікна браузера). Це створює ефект фіксації елемента в певному місці екрану при прокручуванні сторінки

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


  • position: sticky

    Липке позиціонування. Фіксед тримається поки є його контейнер в полі видимості. Як тільки зявляється новий контейне буде новий фікскд

    Для реалізації липкого позиціонування необхідні всього три умови:

    1. У липкого елемента повинно бути встановлено позиціонування position: sticky.
    2. У липкого елемента повинно бути встановлено положення, наприклад top: 0.
    3. Елемент-контейнер повинен бути більшим по висоті за липкий елемент.

    Приклад

Властивість z-index

z-index
z-index: -1;

У прикладі, div.container з відносним позиціонуванням - це спільний предок для чотирьох div.box, які позиціоновані у ньому абсолютно. Використовуючи властивість z-index, можна змінити їх порядок відображення на осі z

1
2
3
4

Властивість overflow

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

overflow: visible | hidden | scroll | auto

  • overflow: visible

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

  • overflow: hidden

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

  • overflow: scroll

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

  • overflow: auto

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

    • Також існують властивості overflow-x і overflow-y, які управляють переповненням тільки у відповідній площині.

  • Заокруглене зображення

    ft

    border-radius: 50px; overflow: hidden;


  • Декоративний оверлей

    overlay position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(100%); transition: transform 250ms ease-in-out;

CSS-переходи

  • transition-property: all | background-color | transform | ...
  • transition-duration: 1000ms; | 1s;
  • transition-timing-function: linear | ease | ease-in | ease-out| ease-in-out
  • transition-timing-function: cubic-bezier(0.39, 1.03, 0.82, 0.08);
  • transition-delay: 0s | 500ms затримка
  • або просто transition
  • transition: [property] [duration] [timing-function] [delay]
  • transition: background-color 500ms linear, transform 500ms ease-in-out;

  • Приклад transition

    linear
    ease
    ease-in
    ease-out
    ease-in-out
    cubic-bezier
    • Code:
    • transform: translatex(0);
    • transition-property: transform;
    • transition-duration: 1000ms;
    • transition-delay: 200ms;
    • :hover .circle
    • transform: translatex(calc(800px - 110px - 20px));

  • Приклад-2 transition

    rotate(90deg)

    • Code:
    • background-color: yellowgreen;
    • transition: background-color 1000ms linear 200ms, transform 200ms linear;
    • container-transition-2:hover
    • background-color: red;
    • transform: rotate(90deg);

Анімації - opacity і transform

  • Як і переходи, анімація надає веб-сторінкам динамічність, але, на відміну від переходів, анімації не потрібен обов'язковий ініціатор (подія), її можна повторити нескінченну кількість разів, і між початковим і кінцевим станами може бути будь-яка кількість проміжних станів.
  • Анімація оголошується директивою @keyframes, яка дозволяє описати набір кадрів (frames, станів) анімації, яких повинно бути як мінімум два (початковий і кінцевий).
  • В анімації не вказується час або елемент, до якого вона буде застосовуватися, це означає, що одну і ту саму анімацію можна використовувати повторно для різних елементів.

Властивості анімації

  • .box { animation-name: changeBgColor; }
  • .box:hover { animation-name: changeBgColor; }
  • animation-name: animetionBgColor;
  • animation-duration: 3000ms;
  • animation-timing-function: linear;
  • animation-delay: 1000ms;
  • animation-iteration-count: 5; - кількість повних повторень анімації.
  • animation-iteration-count: infinite; - це зробить анімацію нескінченною.
  • animation-direction: normal | reverse | alternate | alternate-reverse;
    • normal - анімація відтворюється від початкового до кінцевого кадру, після чого відразу повертається у початковий кадр для наступного повторення (скидається до початкового стану). Це значення за замовчуванням
    • reverse - анімація відтворюється у зворотному напрямку, починаючи від кінцевого кадру і до початкового, після чого відразу повертається у кінцевий кадр для наступного повторення.
    • alternate - перший раз відтворення починається від початкового і до кінцевого кадру, після чого відбувається зміна напрямку на кожному наступному повторенні.
    • alternate-reverse - перший раз відтворення починається від кінцевого і до початкового кадру, після чого відбувається зміна напрямку на кожному наступному повторенні.
  • animation-fill-mode: none | forwards | backwards | both
    • none - стилі анімації впливають на елемент тільки під час анімації. До і після анімації елемент знаходиться у своєму початковому стані. Значення за замовчуванням.
    • forwards - стилі, застосовані в кінці анімації, залишаються на елементі після її завершення
    • backwards - стартові стилі анімації будуть застосовані до елемента ще до старту анімації.
    • both - поєднує forwards і backwards, стилі застосовуються до і після анімації
  • animation-play-state: running | pausedМожна зупинити анімацію
  • animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]
  • За замовчуванням анімація відбувається один раз і фінальні значення анімованих властивостей не зберігаються, натомість елемент повертається до свого вихідного стану.

  • @keyframes

    keyframes keyframes
  • hover
    • Code:
    • animation-name: animetionBgColor;
    • animation-duration: 3000ms;
  • only start
    • Code:
    • animation-name: animetionBgColor;
    • animation-duration: 3000ms;
    • animation-timing-function: linear;
    • animation-delay: 1000ms;
    • animation-iteration-count: 5;
    • Або animation-iteration-count: infinite;

Перспектива

  • transform: perspective(400px) rotateX(0deg);
  • transform: perspective(400px) rotateX(60deg);
  • transform: perspective(400px) rotateY(0deg);
  • transform: perspective(400px) rotateY(60deg);

Властивість perspective

2D-трансформації

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

Властивість transform

transform: none | тип трансформації тип трансформації ...

  • transform: scaleX(tx), scaleY(ty) і scale(tx, ty)
  • не впливаючи на геометрію елементів. Якщо для scale() вказано одне значення, друге буде таке саме.
  • transform: rotate(45deg);
  • transform: translate(100px, 200px);

Викривлення

Функції skewX(кут), skewY(кут) і skew(x-кут, y-кут) використовуються для викривлення (нахилу, деформування) сторін елемента щодо координатних осей. Якщо для skew() вказане тільки одне значення, друге дорівнюватиме 0, тобто це буде аналог skewX().

skewY(30deg)
  • transform: skewY(30deg);
  • animation: animateY30 3000ms infinite 1000ms;

Центрування елемента

  • position: absolute;
  • top: 50%;
  • left: 50%;
  • transform: translate(-50%, -50%);

Точка трансформації

center left
center center
top left
  • .box-origin::before{}
  • animation: rotateWithOrigin 3000ms linear 1000ms infinite;
  • transform-origin: center left;
  • .box-origin::after {}
  • top: top;
  • left: calc(16px / -2);

Перелік методів transform:

  • transform: scale(1.15);
  • transform: rotate(45deg);
  • transform: translate (100px, 200px); Зміщення
  • transform: translate(-50%, -50%); Центрування
  • transform: skew (30deg); Викривлення
  • transform-origin: center або 50% 50% (30deg); Точка трансформації