Keyframe Animations

Go back to Tutorial

Animations with some bounce implemented with keyframes

Animation keyframes go beyond a simple transition to a more intricate animation that goes through one or more intermediate styles when transitioning between two sets of styles.

For each keyframe, you specify an offset that defines at which point in the animation that keyframe applies. The offset is a number between zero, which marks the beginning of the animation, and one, which marks the end.

This example adds some “bounce” to the enter and leave animations with keyframes:

hero-list-multistep.component.ts (excerpt)

animations: [

trigger(‘flyInOut’, [

state(‘in’, style({transform: ‘translateX(0)’})),

transition(‘void => *’, [

animate(300, keyframes([

style({opacity: 0, transform: ‘translateX(-100%)’, offset: 0}),

style({opacity: 1, transform: ‘translateX(15px)’,  offset: 0.3}),

style({opacity: 1, transform: ‘translateX(0)’,     offset: 1.0})

]))

]),

transition(‘* => void’, [

animate(300, keyframes([

style({opacity: 1, transform: ‘translateX(0)’,     offset: 0}),

style({opacity: 1, transform: ‘translateX(-15px)’, offset: 0.7}),

style({opacity: 0, transform: ‘translateX(100%)’,  offset: 1.0})

]))

])

])

]

Note that the offsets are not defined in terms of absolute time. They are relative measures from zero to one. The final timeline of the animation is based on the combination of keyframe offsets, duration, delay, and easing.

Defining offsets for keyframes is optional. If you omit them, offsets with even spacing are automatically assigned. For example, three keyframes without predefined offsets receive offsets 0, 0.5, and 1.

Go back to Tutorial