CSS Transition

CSS transition anatomy

css transition

anim props

opacity, translate, scale are more performent than others

/* even translate3d more performent than translate */

/* ok */
transform: translateX(150px);

/* better */
transform: translate3d(150px,0,0); // hardware accelareted

CSS keyframe animation anatomy

keyframe animation

@keyframes slideIn{
    0%{ opacity: 0}
    100%{ opacity: 1}
}

.ng-enter{
    animation: slideIn 1s;
}