Pure CSS animations

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:

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.

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-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.

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.