Анимация
elem {
animation:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state;
}
div {
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s;
}
Время задержки начала анимации
elem1 {
animation-delay: 2s;
}
elem2 {
animation-delay: 1000ms;
}
Стартовая точка анимации, для последующей анимации
alternate
alternate-reverse
normal - по умолчанию
reverse
elem {
animation-direction: alternate;
}
Продолжительность анимации
elem1 {
animation-duration: 2s;
}
elem2 {
animation-duration: 1000ms;
}
Стилизация элемента вначале и-или в конце
backwards
forwards
both
elem {
animation-fill-mode: backwards;
}
Количество запусков анимации
elem1 {
animation-iteration-count: 2;
}
elem2 {
animation-iteration-count: infinite;
}
Назначает анимацию, созданной с помощью keyframes
elem {
animation-name: myAnimation;
}
Управляет проигрыванием анимации, например можно использовать с псевдоклассом hover
pause
running
elem {
animation-play-state: pause
}
Скорость анимации в течении выделенной ей периода.
ease
easi-in
easi-out
easi-in-out
cubic-bezier(x1, y1, x2, y2)
linear
direction - start or end
elem1 {
animation-timing-function: ease-in-out;
}
elem2 {
animation-timing-function: cubic-bezier(.20, .96, .74, .07);
}
Созданет анимацию с указанным имененм, которую потом можно будет применить к любому элементу страницы.
@keyframes myAnimation {
from {
background-color: black;
}
to {
background-color: whote;
}
}
// плавно опускает элемент
@keyframes bounce {
0% {
transform: translateY(-2000px);
}
70% {
transform: translateY(30px);
}
90% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.some-class {
animation: bounce 0.6s;
}
// встряска формы
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.some-class {
animation: shake 0.6s;
}