AtoZ CSS Quick Tip: Keyframe Animations

K is for @keyframes

In this week's tip, we look at ways to handle vendor prefixes and a quick tip for refactoring your @keyframes into a more condensed format.

We talked a lot about @keyframes in the video about the letter K. Here are some extra tips that you might find useful when working with CSS animations (and any current or future experimental properties).

Tip 1

When setting up your keyframes for an animation, it's quite common for certain points of the animation to share the same values for particular properties. Instead of having a long list of keyframes, you can combine them into a comma separated list, just like you would with selectors that share the same properties and values.

[code language="css"]
@keyframes pulse {
0%, 50% { font-size: 10px }
25%, 100% {font-size: 20px }
}

/* just like */
h1, h2, h3 {
font-family: 'Avenir', sans-serif;
}
[/code]

Tip 2

Support for CSS animations is very good -- at the time of writing the global support is 89.5% and all supporting browsers have both @keyframes and animation unprefixed.

Continue reading %AtoZ CSS Quick Tip: Keyframe Animations%

by Guy Routledge via SitePoint