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
@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.
Search WWH ::

Custom Search