Довідники CSS3 animation

Що таке animation в CSS3?

Властивість animation у CSS використовується для створення анімацій, які дозволяють змінювати зовнішній вигляд елементів протягом заданого часу. Анімації додають динамічності інтерфейсу та роблять його більш інтерактивним.

Властивість animation об'єднує кілька підвластивостей, таких як animation-name, animation-duration, animation-timing-function, animation-delay та інші. Це дозволяє комплексно керувати анімаціями.

Для створення анімацій потрібно визначити ключові кадри за допомогою правила @keyframes. У ключових кадрах задаються стани елемента в певні моменти часу.

Приклад використання:


/* Визначаємо ключові кадри анімації */
@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Застосовуємо анімацію до елемента */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s infinite;
}

У цьому прикладі елемент із класом box переміщується по осі X, слідуючи ключовим кадрам, і анімація повторюється нескінченно завдяки значенню infinite.

Анімації можна комбінувати, додаючи кілька значень властивості animation, розділяючи їх комою. Це дозволяє створювати складні послідовності рухів і змін елементів.

Коментарі