Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Create CSS Animations

DZone's Guide to

How to Create CSS Animations

CSS has become a pretty powerful tool for front-end developers and UI/UX specialists. Read on to learn how to harness this power and create animations with only CSS.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

The first step in using animation in CSS is the transition property. When predefined transitions are not enough or just not suitable, there is CSS animation.

Note: No JavaScript is used in this post!

The animation property has two parts: keyframes and the animation property. Keyframes define stages and styles of the animation and animation property assign keyframes to the element and specify how the animation will run out on the defined element.

Keyframes

With defining keyframes you actually set steps for your animation. The syntax for this part of the animation is the word @keframes followed by the animation name followed by keyframe selectors and its style.

 @keyframes animation-name{
     0%{CSS}
     50%{CSS}
     100%{CSS}
 }

The animation is created by gradually changing from one style set to another by using keyframe selectors. These selectors can have values between 0%-100% (or words "from" and "to" which stand for 0% and 100%). With this syntax, 0% represents the beginning of the animation and 100% represents the end.

Properties you can animate are not infinite, so there is a list of them.

Now, the most shocking thing about the @keyframes option: Using!important in CSS inside of the keyframes does not only make your code important but it does ignore the whole code line...!shock

Animation Property

Once the keyframes are defined you better make sure that work pays off and use them. Inside of the selector you want to animate, add the animation property. This property is shorthand for eight animation properties.

 animation
 =
 animation-name
 animation-duration
 animation-timing-function
 animation-delay
 animation-iteration-count
 animation-direction
 animation-fill-mode
 animation-play-state

The main properties to add are animation-name and animation-duration. Without animation-name you can't link animation to keyframes and without animation-duration, the duration of yoru animation will be set to zero and so there will be no animation.

Other properties are used for better defining animation. Animation-timing-functionspecifies the speed curve of the animation. It can be defined with pre-defined values (linear, ease, ease-in, ease-out, ease-in-out) or custom definitions can be added with steps or cubic-bezier values.

The Animation-delay property works pretty much the same as the transition property一it defines the start of the animation.

By default, the animation will be played one time. With animation-iteration-count you can change this to any number or define it as infinite.

Animation-direction property specifies animation cycle一whether it will be played forwards, backward or in alternate cycles. Options that define those states are normal, reverse, alternate (forward then backward) and alternate-reverse (backward then forward).

TheAnimation-fill-mode property defines the style of the element when the animation ends or before it starts. The default state is none and in this state the animation will not apply any styles to the animated element. The option both will set the first keyframe value to the element until it starts, and the last keyframe value after it ends. The options forwards and backwards define separate options from both.

And, finally, with animation-play-state you can pause the animation and play it again. So, it has two options, running (which is default) and paused.

Even though the animation property is shorthand for all listed options, it is common to use it just for animation-name and animation-duration and the list the other properties separately.

 animation: icon-animation 2s;
 animation-timing-function:ease;
 animation-delay: 5s;
 animation-iteration-count:infinite;
 animation-direction:normal;
 animation-fill-mode:both;
 animation-play-state:running;

Just for the record, it is possible to add more than one animation to the element.

And just a short note about prefixes: with all animation properties and keyframes you should use -webkit-. For few specific known issues check caniuse.

Examples

The animation itself is not really a thing that has a specific purpose in the design. On the other hand, it can be used wherever, and it will always add a value. I will say that specific animation (defined with this property) is used on the special effects the most, and animation defined with the transition is used on more common elements like hover and other states.

Also, some effects, like the hover effect, or even just a line with unusual behavior, is defined with the animation property.

So, if you need to add "that something" to your already finished design, you can add a special effect in the background or on some specific elements (loader, scroll, hover...).

Heres another great resource with CSS examples: https://www.creativebloq.com/inspiration/css-animation-examples.

Epilogue

The animation property is, in my opinion, one of the "higher-level" CSS properties so if you're not using it for the wow effect, you will need it to "master CSS." If you are interested in UX (if not you maybe should be), checkout a very nice text about animation from the invisionapp team.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web dev ,css ,css animation ,front-end development ,ux design

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}