Chapter 6 ■ CSS3 Keyframe animationS for Web Content
Listing 6-20. CSS for a Notification Alert Sequence
@keyframes popup {
0%, 30% { height: 0; padding: 0 20px; display: none; }
}
@keyframes fade {
100% { opacity: 0; }
}
@keyframes progress {
100% { width: 100%; }
}
Note that you’re taking a slightly different approach with these keyframe sequences: because the default
states for the elements were already defined in Listing 6-20, you’re only using the keyframes to define the from
state (in the case of popup) or the to state (in the case of progress and fade). The browser will automatically tween
between these values and the default embedded, inline, and linked styles as appropriate. It’s only when you
include values for both 0% and 100% in your @keyframes declaration that you control the entire appearance of
the element (considerations of animation-fill-mode aside).
All of the notification popups share the same animation, with the exception of the delay before the
animation that is initialized for each popup. Working your CSS effectively means that you should put as much
similar CSS as possible in a single declaration, as shown in Listing 6-21.
Listing 6-21. Keyframe Sequences Called from a Single Shared Declaration
div.notification {
...
animation-name: popup, fade;
animation-duration: 2s, 1s;
animation-timing-function: cubic-bezier(0.325, 0.730, 0.695, 1.650);
animation-fill-mode: backwards, forwards;
animation-delay: 2s, 14s;
}
Without any contradictory statements, every notification panel will inherit all of the styles in Listing 6-21, but
animation delay is the one thing you have to change for each (see Listing 6-22).
Listing 6-22. Setting Different Animation-Delay Values for Subsequent Notification Panels
div.notification:nth-child(2) {
animation-delay: 6s, 18s;
}
div.notification:nth-child(3) {
animation-delay: 12s, 24s;
}
You take a similar approach to the progress bar for each panel (Listing 6-23).Listing 6-23. Setting Different Animation-Delay Values for Progress Bars
div.progress span {
background: #000; display: block; width: 0; height: 3px;
animation: progress 12s 4s forwards linear;
}