CSS Animations

CSS Animations are a way to bring movement and interactivity to elements on a webpage using Cascading Style Sheets (CSS). They allow you to animate various CSS properties over a specified duration, creating visually appealing effects without the need for JavaScript or external plugins like Flash.

Key Features of CSS Animations

  1. Ease of Use: CSS animations are easy to implement, requiring only a few lines of code directly within your stylesheet.
  2. Performance: CSS animations are often smoother and more efficient than JavaScript-based animations, leading to better performance and a smoother user experience.
  3. Control: You have precise control over the timing, duration, easing, and other aspects of the animation through CSS properties.
  4. Browser Support: CSS animations are supported by most modern web browsers, making them a reliable choice for creating interactive web experiences.
  5. Hardware Acceleration: Many CSS animations can take advantage of hardware acceleration, further improving performance on capable devices.

How CSS Animations Work?

CSS animations are created using @keyframes rule, which allows you to define a sequence of keyframes that describe how the element should appear at various points during the animation. Each keyframe specifies the CSS properties and values that should be applied at a certain percentage of the animation's duration.

Once the keyframes are defined, you apply the animation to an element using the animation property, specifying the name of the keyframes, duration, timing function, delay, iteration count, and other options as needed.

Basic Syntax:
@keyframes animation-name { 0% { /* initial state */ } 100% { /* final state */ } } /* Applying the animation to an element */ .element { animation-name: animation-name; animation-duration: 3s; /* duration of the animation */ animation-timing-function: ease; /* timing function (e.g., linear, ease-in, ease-out, ease-in-out) */ animation-delay: 1s; /* delay before the animation starts */ animation-iteration-count: infinite; /* number of times the animation should repeat */ animation-direction: alternate; /* direction of the animation (e.g., normal, reverse, alternate) */ }

Components of a CSS animation

Keyframes

Defined using the @keyframes rule, keyframes specify the animation's start and end points, along with any intermediate styles. Each keyframe is assigned a percentage value along the animation timeline (e.g., 0% for the beginning, 100% for the end).

Animation Properties

Applied to the element you want to animate, these properties control various aspects of the animation:

  1. animation-name: References the name of the animation defined in the keyframes rule.
  2. animation-duration: Specifies the total time the animation takes (e.g., 1s, 2s).
  3. animation-timing-function: Defines the easing of the animation (e.g., ease-in, ease-out).
  4. animation-iteration-count: Determines how many times the animation repeats (e.g., infinite, 2 times).
  5. animation-direction: Specifies the playback direction (e.g., normal, alternate).
  6. animation-fill-mode: Controls how the element appears before and after the animation (e.g., none, forwards).

The @keyframes Rule

he @keyframes rule in CSS is used to define the behavior of an animation. It allows you to specify a series of keyframes, which describe how an element should look at various points during the animation's duration. Each keyframe consists of style rules that define the CSS properties and values to be applied at a specific percentage of the animation.

Syntax:
@keyframes animationName { 0% { /* CSS properties/values at the start of the animation */ } 50% { /* CSS properties/values halfway through the animation */ } 100% { /* CSS properties/values at the end of the animation */ } }
Explanation:
  1. @keyframes: This keyword indicates the beginning of a keyframe animation rule.
  2. animationName: A name you assign to the animation. This name is later used to reference the animation when applying it to an element.
  3. 0%, 50%, 100%, etc.: These represent the keyframe percentages, indicating at which point during the animation's duration the associated styles should be applied. You can use any percentage value between 0% and 100%.
  4. CSS properties/values: Within each keyframe block, you define the CSS properties and their corresponding values that you want to apply at that specific point in the animation.
Example:
@keyframes slide-in { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
In this example:
  1. slide-in is the name of the animation.
  2. At 0%, the element is translated 100% to the left, effectively moving it off-screen to the left.
  3. At 100%, the element is translated back to its original position, effectively sliding it in from the left.
Usage:

Once you have defined the @keyframes rule, you can apply the animation to an element using the animation-name property:

//CSS .element { animation-name: slide-in; animation-duration: 1s; /* Duration of the animation */ animation-timing-function: ease; /* Timing function (e.g., linear, ease-in, ease-out) */ animation-delay: 0s; /* Delay before the animation starts */ animation-iteration-count: 1; /* Number of times the animation should repeat */ animation-direction: normal; /* Direction of the animation (e.g., normal, reverse, alternate) */ }

This applies the slide-in animation to elements with the class .element, specifying additional animation properties like duration, timing function, delay, iteration count, and direction.

Examples:

Fade In Animation

CSS:
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { animation-name: fadeIn; animation-duration: 2s; }
HTML :
<div class="fade-in">This text will fade in.</div>
run this source code Browser View
This text will fade in.
Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fade In Animation</title> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { animation-name: fadeIn; animation-duration: 2s; } </style> </head> <body> <div class="fade-in">This text will fade in.</div> </body> </html>

In the above program, the text "This text will fade in." fading in gradually over a period of 2 seconds when you open the HTML file in a web browser.

Moving Element Animation

CSS:
@keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } } .move { animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
HTML :
<div class="move">This element moves back and forth.</div>
run this source code Browser View
This element moves back and forth.
Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Move Animation</title> <style> @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } } .move { animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } </style> </head> <body> <div class="move">This element moves back and forth.</div> </body> </html>

This Program will display the text "This element moves back and forth." which moves horizontally back and forth continuously within a range of 200 pixels every 3 seconds.

Rotating Element Animation

CSS:
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; }
HTML :
<div class="rotate">This element rotates continuously.</div>
run this source code Browser View
This element rotates continuously.
Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rotate Animation</title> <style> @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } </style> </head> <body> <div class="rotate">This element rotates continuously.</div> </body> </html>

This program will display the text "This element rotates continuously." which rotates 360 degrees continuously every 4 seconds.

Scaling Element Animation

CSS:
@keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .scale { animation-name: scale; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
HTML :
<div class="scale">This element scales up and down.</div>
run this source code Browser View
This element scales up and down.
Full Source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scale Animation</title> <style> @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .scale { animation-name: scale; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } </style> </head> <body> <div class="scale">This element scales up and down.</div> </body> </html>

This program will display the text "This element scales up and down." which scales up to 1.5 times its original size at 50% of the animation duration and then scales back to its original size continuously every 3 seconds.

Combining Animations

CSS:
@keyframes slideFadeIn { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } .slide-fade-in { animation: slideFadeIn 1.5s ease-out; }
HTML :
<div class="slide-fade-in">This element slides and fades in.</div>
run this source code Browser View
This element slides and fades in.
Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide and Fade In Animation</title> <style> @keyframes slideFadeIn { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } .slide-fade-in { animation: slideFadeIn 1.5s ease-out; } </style> </head> <body> <div class="slide-fade-in">This element slides and fades in.</div> </body> </html>

Above program will display the text "This element slides and fades in." which simultaneously slides in from the top by 50 pixels and fades in from transparent to fully visible over a duration of 1.5 seconds with an ease-out timing function.

Benefits of CSS Animations

  1. Improved User Experience: Animations can make interactions more engaging and intuitive for users, improving the overall user experience of your website or web application.
  2. Visual Appeal: CSS animations can add visual interest and polish to your designs, making them more attractive and memorable.
  3. Accessibility: When used thoughtfully, animations can provide valuable feedback and context for users with disabilities, enhancing accessibility.
  4. Reduced Development Time: CSS animations can often be implemented more quickly and with less code than JavaScript-based alternatives, reducing development time and complexity.

Conclusion

CSS animations enable the creation of dynamic movement and visual effects on web elements without the need for JavaScript. By defining keyframes that describe the intermediate states of an animation, along with various animation properties like duration and timing function, CSS animations can bring elements to life with smooth transitions and interactions, enhancing the user experience of web pages. They offer a lightweight and efficient way to add engaging motion and interactivity to websites, improving their visual appeal and usability.






Related Topics
  1. CSS Transitions
  2. Difference between Animations and Transitions
  3. CSS Overlay