HTML and CSS Reference
In-Depth Information
As mentioned earlier, a keyframe is just like a regular
CSS
rule: you
can list as many properties as you need (although like transitions, not
all properties are animatable). For this example, all that's been added
to the previous one is a
scale
transform; see the full source code in
ch09/animations-2.html:
@keyframes bounce {
from { top: 50px; transform: scale(1); }
25% { top: 350px; transform: scale(1.25); }
50% { top: 50px; transform: scale(1); }
75% { top: 350px; transform: scale(1.25); }
to { top: 50px; transform: scale(1); }
}
Just like transitions, multiple animations can be applied simultane-
ously. Next, you see the element doing the same up-and-down bounce
animation as before, but now it's also sliding left to right.
