Разница между анимацией и переходом в CSS

Опубликовано: 26 Декабря, 2021

CSS переходы позволяют изменять значение свойств гладко, но они всегда должны быть вызваны как парение. Изменения собственности не вступают в силу немедленно. Со временем происходит изменение собственности. Например, если вы измените цвет элемента с белого на черный, изменение произойдет мгновенно. Изменения CSS происходят через временные интервалы, следующие за кривой ускорения, которую можно настроить.

Анимации, переходящие между двумя состояниями, называются неявными переходами, поскольку состояния между начальным и конечным состояниями неявно определяются браузером.

fig1: Переход начинается в точке A и заканчивается в точке B без промежуточной точки.

CSS- анимация позволяет анимировать элементы HTML, в отличие от перехода, который выполняет только операцию от точки A к точке B, но также может выполнять гораздо больше операций между ними. Анимация состоит из двух шагов: CSS-анимация, определенная в таблицах стилей, и набор ключевых кадров, указывающих начальное и конечное состояния анимации.

fig2: Анимация, начинающаяся в точке A, заканчивается в точке B с другими точками между ними.

Разница между переходами и анимацией:

Переход	Анимации
Переходы не могут зацикливаться (вы можете заставить их делать это, но они не предназначены для этого).	У анимации нет проблем с зацикливанием.
Переходам нужен триггер для запуска, как при наведении курсора мыши.	Анимация только начинается. Им не нужен внешний источник запуска.
С переходами легко работать в JavaScript.	В JavaScript сложно работать с анимацией. Синтаксис для управления ключевым кадром и присвоения ему нового значения очень сложен.
Переходы оживляют объект из одной точки в другую.	Анимация позволяет вам определять ключевые кадры, которые варьируются от одного состояния к другому, с различными свойствами и временными рамками.
Используйте переход для управления значением с помощью JavaScript.	Гибкость обеспечивается наличием нескольких ключевых кадров и простого цикла.

Пример 1. В следующем примере демонстрируется эффект перехода при изменении цвета после применения наведения .

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }
 
        div:hover {
            background: yellow;
        }
    </ style >
 </ head >
 
< body >
    < h1 >The transition Property</ h1 >
 
    < p >
        Hover over the div element below,
        to see the transition effect:
    </ p >
    < div ></ div >
 </ body >
 
</ html > 

Выход:

Пример 2: В следующем примере показано изменение цвета с помощью анимации.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 2s;
        }
 
        @keyframes example {
            0% {
                background-color: red;
            }
 
            50% {
                background-color: blue;
            }
 
            100% {
                background-color: yellow;
            }
        }
    </ style >
 </ head >
 
< body >
    < p >Animation</ p >
    < div ></ div >
 </ body >
 
</ html > 

Выход:

Изменение цвета с помощью анимации

Разница между Picked HTML CSS-Misc HTML-Misc CSS

Разница между анимацией и переходом в CSS

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ