ng-book

Angular Animation 412
CSS3 Animations
Let’s start by adding the @keyframe animations that we’ll define for the animation. Here, we add a
background color to highlight the text. We also define the remove animation for pulling the highlight
from the text:
@keyframes animateMe-add {
from {font-size: 16px;}
to {font-size: 50px;}
}
@-webkit-keyframes animateMe-add {
from {font-size: 16px;}
to {font-size: 50px;}
}
@keyframes animateMe-remove {
to {font-size: 50px;}
from {font-size: 16px;}
}
@-webkit-keyframes animateMe-remove {
to {font-size: 50px;}
from {font-size: 16px;}
}
All we need to do to apply the animation is include the animation CSS style on our classes:
.animateMe.grown-add {
-webkit-animation: 2s animateMe-add;
animation: 2s animateMe-add;
}
.animateMe.grown-remove {
-webkit-animation: 2s animateMe-remove;
animation: 2s animateMe-remove;
}
JavaScript Animation
When animating with JavaScript, we need to define the addClass and removeClass properties on
our animation description object.