Animation
KeyFrame way to create animation:
At first we have to create keyframe
:
@keyframes moveToLeft {
0% {
opacity: 0;
transform: translateX(-10px);
}
80% {
transform: rotate(10deg);
}
100% {
opacity: 1;
}
}
How to use this keyframe
:
.some-block {
animation-name: moveToLeft;
animation-duration: 2s;
animation-timing-function: ease-out;
// animation-delay: 1s; // Delay before it starts
// animation-iteration-count: 3; // Сколько раз вовторить - бесполезно как правило
}
Shorten form:
.some-block {
animation: moveToLeft 1s ease-out;
}
Заанимировать любые изменения:
.animated-block {
transition: all .2s;
}
Способ пофиксить тряску у анимации: установить для parent елемента
.parent-block {
backface-visibility: hidden;
}