Команда @keyframes - ключевые кадры анимации в CSS
Команда @keyframes задает ключевые
кадры анимации. Ключевой кадр представляет собой
различные свойства нашего CSS элемента, например, положение,
размер, цвет и др., которые применяются к элементу в
указанный момент времени.
Синтаксис
@keyframes имя анимации {
ключевые кадры
}
Пример
Задаем ключевые кадры:
<div id="elem"></div>
@keyframes anim {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: anim 3s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
А теперь давайте переместим наш квадрат с помощью анимации сверху внизу:
<div id="elem"></div>
@keyframes anim {
from {
margin-top: 0%;
}
to {
margin-top: 10%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
Давайте увеличим ширину нашей фигуре с помощью анимации, задав ключевые точки в процентах:
<div id="elem"></div>
@keyframes anim {
from {
width: 10%;
}
to {
width: 40%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
А теперь давайте изменим прозрачность нашей фигуре:
<div id="elem"></div>
@keyframes anim {
from {
background-color: #467CBC;
}
to {
background-color: #C2DDFD;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Смотрите также
-
все свойства для CSS анимации
animation-name,animation-duration,animation-delay,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,keyframes -
transition- плавные переходы (анимация по наведению на элемент)