transform: translate(x, y) rotate(x, y) scale(x, y) skew(x, y);
transform-origin: x y; // px, em, rem, %, left/right/top/bottom/center
transition-property: width, height; // properties
transition-duration: 1s; // s, ms
transition-property: width, height; // change width and height
transition-duration: 1s, 5s; // width in 1s, height in 5s
transition-timing-function: ease; // linear, ease, ease-in, ease-out, ease-in-out
cubic-bezier(x1, y1, x2, y2);
Examples:
cubic-bezier(0, 0, 1, 1) // linear
cubic-bezier(0.42, 0, 1, 1) // ease-in
transition-timing-function: steps(number_of_steps, direction);
.platform {
animation-name: lift-up;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: normal; // normal - default, reverse, alternate, alternate-reverse
animation-delay: 1s;
// element state after animation
animation-fill-mode: forwards; // none, forwards, backwards, both;
animation-play-state: running; // running, paused;
animation-timing-function: ease; // multiple variants;
}
@keyframes lift-up {
from { // or 0%
transform: translateY(0px);
}
50% {
transform: translateY(-250px);
}
to { // or 100%
transform: translateY(-300px);
}
}
