CSS Animations
up:: CSS
.block {
transition: all; /* animate all properties */
transition:
transform /* animate transform property */
0.3s /* time */
ease;
}
Keyframes allows you to define the animation more granuarly.
.animate {
animate: slide-fade 0.3s ease-out forwards; /* forwards means keeping the final state */
}
@keyframes slide-fade {
0% { transform: translateX(0) }
70% { transform: translateX(-50px) }
100% { ... }
}
As a shorthand, you can also use from
and to
when animating from 0% to 100%.