Angular Animation
  • Introduction
  • Getting Started
    • Add Angular Animate
  • Animating Core Directives
    • CSS Transition
    • ng-class Add/Remove
    • ng-include Animation
    • ng-repeat Animation
    • ng-show/ng-hide Animation
    • Form Animation
    • ngMessages Animation
  • Animating Custom Directives
Powered by GitBook
On this page
  • CSS transition anatomy
  • CSS keyframe animation anatomy

Was this helpful?

  1. Animating Core Directives

CSS Transition

PreviousAnimating Core DirectivesNextng-class Add/Remove

Last updated 5 years ago

Was this helpful?

CSS transition anatomy

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

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

.ng-enter{
    animation: slideIn 1s;
}
css transition
anim props
keyframe animation