CSS Transitions and transforms work beautifully for creating visual interactions based on single state changes. To have more control over what happens and when, you can use the CSS animation property to create easy CSS animation using @keyframes. This technique has a wide range of design application and can be used to build dazzling pre-loaders, interactive interfaces, effects or full-scale storytelling. In this tutorial you’ll learn how to apply what you know about CSS transitions to quickly master animation, and how to use @keyframes for applying various style rules to your element at different intervals.
If you missed it, check out Easy CSS Animation With Transition & Transforms to get your mind thinking about how your element should move. CSS transition and animation are almost the same, where animation can dig deeper by giving your element a defined timeline for when different style changes take effect.
CSS keyframes allow changes to run automatically and continuously, rather than just in response to mouse events the way transition does. They give us a way to change the CSS declarations on a given selector at any point during a state change or an event detected through jQuery (such as scrolling). Keyframes are paired with the animation property to set the duration, timing function, delay and direction instead of transition. Properties such as transform, if part of an animation, are then declared within the @keyframes rule.
To start, each @keyframe rule gets a unique name:
This name is used on the element’s style to pair it with the animation:
Inside it, you set a rule for a percentage representing the point along the animation’s timeline for the declared CSS styles to be rendered on the element:
In this example, the element div with a class of element goes from pink to yellow to blue. You can also use from and to when going between only two points:
Here is an example of applying this simple rule to a background color change on the body:
See the Pen CSS @keyframes Color-changing Background by Vail Joy (@vailjoy) on CodePen.27486
The @keyframes themselves do nothing without some instructions that define things like the duration, timing function and direction, which each work just like they do in the transition property. These animation sub-properties can be declared in one animation declaration using the following syntax:
Or set individually by appending animation- to the beginning of each sub-property:
…You get the idea.
Not all of these sub-properties are required, but they do have to be in the right order so the browser can apply the timing value to the right thing, or distinguish the animation name from other keywords, for example. Here is a quick run-down of the sub-properties you’ll use the most:
See the Pen Animation Timing functions visualization by Vail Joy (@vailjoy) on CodePen.27486
In addition to the property values we are already familiar with thanks to transition, animation takes a direction, iteration-count, play-state and fill-mode.
By default, animations go through one cycle, then end. The animation-iteration-count sub-property value may be set using either a number representing how many times the animation should run, or the infinite keyword to run it indefinitely.
The animation-direction subproperty does not define the visual direction of an animation (your style rules define position and start and end states) but rather tells the animation which order to run the keyframes. This sub-property can be set to normal, reverse, alternate, and alternate-reverse.
The animation-fill-mode sub-property decides if the animation styles should remain visible before or after the animation plays.
By default (normal), the styles defined inside the animation keyframes do not affect the element before or after the animation plays. Setting the fill-mode value is useful if you need the end-state of your animation to become the new state until something else happens, or to fix the abrupt change back to the original state (as you can see in our background change demo above). Here is a breakdown of what each value does:
You’ll see how to use fill-mode on a hover effect to keep that abrupt flicker from happening below.
The play-state value can be set to paused or running. One useful way to implement play-state is to set it to paused on hover. If you look at our first example above, hover over the bar highlighting each keyframe as it plays, and it will pause.
Note you can used animation: paused; or animation-play-state: paused;, but it is always best to declare a specific sub-property when resetting or overriding a previous value on state change.
See the Pen Animation @keyframes in Image Hovers by Vail Joy (@vailjoy) on CodePen.27486
This example demonstrates how you can create a “shutter” effect on an image gallery when the image is hovered. Unlike a simple hover effect using transition, this CSS animation uses keyframes to gradually change opacity on a pseudo-element while changing its size, and remove a CSS3 grayscale filter added to each image’s original state.
Here are the important bits of the CSS for the image wrapper and pseudo-element that will overlay it:
Note the filter and opacity set on these elements. These declarations define their default states before the animation is triggered.
Now we set the animation property for the event we want to trigger the animation. Using :hover is the simplest – you could also set a special class name on an event detected with jQuery.
In the first animation, we link it to the bloom keyframes, give it an ease-in-out timing function that will play out over .75 seconds and then return to the original style thanks to the animation-fill-mode setting of forwards – this ensures our effect doesn’t just blink back to the original grayscale effect. In our second animation, we link it to the circle keyframes and tell it to play out over the same .75 seconds.
In our bloom animation, we are taking the grayscale filter declared on the figure element our animation is set on from .8 to none. When the animation finishes, it stays at 0 thanks to our animation fill mode. If we didn’t set this, it would blink back to grayscale abruptly.
On our second animation circle, we take the element opacity from half to full, change the color to a yellow then pink, then expand the element larger while bringing the opacity back to 0.
This is the basis for creating a simple “pulse” or “shutter” effect. Note that the element opacity is separate from the color’s RGBA opacity!
Once you have the basics of CSS animation down, you can see how easy it is to come up with endless possibilities. Even still, many excellent code libraries and tools exist to help us implement CSS animations quickly. Here are a few of the best ones:
Previously, I showed you how to use Flexbox to create a split-screen layout, then use the animate.css library to animate the opening of the content pages and images. Animate.css provides several pre-made animations you can preview and then drop-in your project using a single class name. What’s more, it offers a great way to get started with learning how to apply and remove CSS classes from an element using jQuery. Be sure to check out that tutorial to learn how to kick off your animations on events like clicks or scroll points.
cubic-bezier.com provides a wonderful visual interface for making your own cubic bezier timing functions, and seeing the results in real time. The code snippet can be copied and pasted right into your stylsheets.
The CSS Animate web tool helps you generate full keyframe and animation codeblocks for a jumpstart on coding complex timelines. If you were ever into Flash, this might look familiar. Simply click a spot on the timeline, drag your element into position, set its animation properties then repeat for each new point selected on the timeline. Play back your completed code to refine, then copy/paste.
Nice writing with example. Anyone will give you 5?. I liked it and listed to my collections.
Thanks a lot. Great article.
I absolutely ove ykur website.. Great colors & theme. Diid youu
devekop tis webb ssite yourself? Pleqse reply bacck ass I’m wanting too cdeate myy vety own siite
and waant too know where you goot thyis fdom oor just wht
thhe thyeme iss called. Cheers!
Perhaps you have changed your overall theme, but none of the code is visible against the dark background, unless the user selects it.
Your email address will not be published. Required fields are marked *
