Pure CSS animations

CSS animations are functions of CSS that make it possible to animate changes to one or more style properties of elements and control various aspects of the animation. Pure CSS animations do not require any additional code (e.g. JavaScript) or media (e.g. GIFs) - everything is done with HTML and CSS. You can find out how to use CSS animations for your project and integrate them into your work in this blog post.

  • Pure CSS animations
  • Pure CSS animations
  • Pure CSS animations
  • Pure CSS animations
  • Pure CSS animations
Pure CSS animations

How do CSS animations work?

The following is required to create a CSS animation :

  • an HTML element that is to be animated
  • a CSS rule that binds the animation to this element
  • a group of keyframes that define the styles at the beginning and end of the animation
  • You can also add declarations to further customize your animation, including speed and delay

CSS animations are ideal for websites that want to add dynamic and engaging content without adding too much load to the page. As no additional scripts are required, CSS animations are unlikely to slow down the page.

The advantages of the CSS animations:

  • Only CSS knowledge is required to create CSS animations, which can be created without JavaScript knowledge.
  • Animations do not have to be loaded externally; they are executed directly in the browser, which shortens the overall loading time, increases compatibility and improves responsiveness.
  • The JavaScript code is not executed in browsers without JavaScript support.
  • The browser controls the animation, which improves performance and ensures a smooth process.


Example 1
Here is a simple example of a CSS animation:

In this example 


A look at the CSS shows that the animation declarations are bound to the div selector. The most important declaration here is "animation-name", which binds the keyframe "my-animation" to the div element. Below this are several other declarations that influence the timing and behavior of the animation :

  • "animation-duration" specifies the time in which an animation runs through a cycle
  • "animation-direction" determines whether an animation is to be played forwards, backwards or alternately
  • "animation-iteration-count" specifies how often an animation should be repeated
  • "animation-timing-function" specifies how an animation moves through the keyframes by defining acceleration curves

The animation itself is created with a keyframe, which is defined by the rule @keyframes. A keyframe defines the initial state of the animation (within from{}) and its final state (within to{}). The keyframe "my-animation" changes three style properties of our div: background-color, width and top. If these three properties are animated at the same time, a coherent animation is created.

Example 2
Button wiggle:

Possible reasons if your CSS animation is not working

If you're a beginner developer (which can happen even to experienced developers ) and you're having trouble creating CSS animations that don't work the way you intended, look for these common problems:

  1. The "animation-name" property is not defined.
    The "animation-name" property is required, otherwise the animation will not be rendered.
  2. The "animation-duration" property is not defined.
    The "animation-duration" property must also be set. Otherwise, the default value is set to 0 seconds and the animation is not rendered.
  3. No @keyframes rule is defined.
    Animations are only executed when animation properties are applied and therefore require explicit values for the properties to be animated. These values are specified by keyframes. If they are not specified in a @keyframes rule, the animation is not executed.
  4. The name of the @keyframes rule does not match the name of the animation.
    The name of the @keyframes rule must match the value of the "animation-name" property. Otherwise, the browser cannot assign the animation to the keyframes declaration and the animation is not rendered.
  5. The animation-fill-mode property is not defined.
    By default, CSS animations reset an element to the state it was in before the animation when the animation cycle is finished. This can cause the animation to appear interrupted. To avoid this, you can define the "animation-fill-mode" mode.
  6. The CSS property you want to animate is not animatable.
    Some CSS properties are not animatable, i.e. they cannot be used in animations.
  7. Your browser version does not support CSS animations.
    If your CSS animation does not work, the problem may not be with your code, but with your browser. While CSS animations work on most modern desktop and mobile browsers, this is not the case with older browsers or older browser versions. In this case, you need to change or update your browser.
  8. The values for CSS Shorthand Properties are in the wrong order.
    CSS Shorthand is ideal for CSS cleaner to write, but can be more difficult to write because the order of the values is important. There is no strict order for each value. „sub-property“, But some of them are important. "time" value of the "animation-duration" property and the second is assigned to the "animation-delay" property, Therefore, these values should not be confused. The typical sequence for the values of the short hand "animation" Property is: animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state.

CSS transitions vs. keyframe animations

As you have seen, you can use CSS keyframe animations to add smooth motion effects using only CSS, without the need for JavaScript. Another option is to use CSS transition, both of which are efficient in terms of performance, especially when animating opacity and transformation properties, which are very well optimized by browsers.

With CSS transitions, you can change the value of a property from an initial state to a final state in response to an event, e.g. mouseenter, mouseout, click, etc. This means that if your animation only has these two states, CSS transitions are the best and simplest tool at your disposal. Common use cases for "transitions" are "hover" or "mouseclick", changing the link or button color for "hover", showing and hiding a dialog in response to a button click, and the like.

If you want to create animations that have more than one start and end state, and if you want to have more control over what happens in all intermediate states, then CSS keyframes are the better choice for your project.


CSS transitions CSS animations
Can only move from the initial state to the final state - no intermediate steps Can transition from the initial state to the final state, with intermediate stages in between
Can only be carried out once Can be repeated an infinite number of times with the animation-iteration-count property
Is triggered by a trigger (e.g. "mouse hover") Can be triggered, but can also run automatically
Runs forwards when triggered and backwards when CSS rule is removed Can move forwards, backwards or in another direction.
Easier use with JavaScript More difficult use with JavaScript
Best suited for changing from one state to another Best suited for complex movement sequences

Example 3

In this example, we see several CSS transition animations on one element:


CSS-based animations do not work in IE9 and older browsers. While many developers no longer want to support older browsers (especially IE), many customers still use them.

CSS animations vs. JavaScript animations

With JavaScript:

  • JavaScript-based animations offer much more flexibility, power and a better workflow for complex animations and rich interactivity because JavaScript is essential - you can define the animation programmatically.
  • Creating animations using JavaScript is much more complex than creating CSS transitions or animations.

With CSS:

  • They are easy to use for simple animations, you can start creating them without any JavaScript knowledge, and the animations run well even under moderate system load. 
  • When the browser takes control of the animation sequence, it can optimize performance and efficiency.


CSS animations and JavaScript animations play a central role in the design of websites, whereby each method has its own advantages and possible applications.

CSS animations are characterized by their ease of implementation and optimized performance. Thanks to direct control via the browser, they are particularly suitable for uncomplicated animations where the focus is on fast implementation.

JavaScript animations offer more precise control over the animation process and are particularly suitable for complex scenarios where developers have specific flow and interactivity requirements. The ability to respond to user interactions makes them ideal for sophisticated, interactive applications.

The choice between the two approaches should therefore depend on the individual project requirements. If the focus is on simple implementation and good performance, CSS animations may be the preferred choice. For more comprehensive control and interactivity, JavaScript offers a suitable solution. Often, however, the clever combination of both techniques leads to a balanced solution that synergistically uses the strengths of CSS and JavaScript to realize appealing and efficient animations.

Pure CSS animations Pure CSS animations