There are no obvious CSS properties or values for making a @keyframe animation wait between iterations, or have a pause before starting. But Nils Riedmann cooked up a clever way to do it using linear() animation timing. I think this is cleaner than faking it with multiple benign keyframe steps. Remember linear is not the same as linear(). The later is a function that can take any number of points and thus create any sort of easing.
Featured
Masonry (with Animation) in CSS
Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here’s a way to get that in native CSS as well as the layout.