We've used animations in quite a few places across the site, notably on this warning button:
And also on the main logo (hover to see it animate):
Although both seem different, they actually use the same very simple key frames:
@keyframes top10 {
from { background-position: 0 50%; }
to { background-position: 100% 50%; }
}
This just animates the background position from the left to the right, but both examples utilise it in a slightly different way.
The background of the warning button is created from CSS gradients, which create a diagonal candy stripe pattern across a set area:
.warning {
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 16px), linear-gradient(#FFA1A1, #FF4B4B);
background-position: 0 50%;
background-size: 68px 60px;
}
The reason that we used background-size to limit the area is that this is what allows the animation to happen; using just repeating-linear-gradient means that there’s no background position to be animated. As a fallback we provided the same pattern as an image.
The animation controller itself is very simple; it runs for 3 seconds, and repeats infinitely, making the pleasing ‘barber’s pole’ effect:
.warning { animation: top10 3s linear infinite; }
The logo shine effect, as I mentioned above, uses the same keyframes. The image itself is a sprite which has 21 iterations of the logo:
...and this is animated over half a second, but with the addition of the steps() method:
.logo:hover { animation: top10 500ms steps(20) 1; }