Using CSS Animations – CSS

title: Using CSS Animations

Using CSS Animations

CSS animations change elements from one CSS style to another.

There are no limits to how many CSS propreties you can change.


CSS animations work by using keyframes, which define what style the element has at any given time.

/* Using from/to */ @keyframes animationName { from {opacity: 1;} to {opacity: 0;} } /* Using Values */ @keyframes animationName { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} }

To create a CSS animation sequence, we have different sub-properties in the animation property in CSS :

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

Sample CSS animation sequence for move text across the screen

In the HTML part we will have a div with class container and a h3 with the text Hello World:

<div class="container"> <h3> Hello World ! </h3> </div>

For the CSS part :

.container { /* We will define the width, height and padding of the container */ /* The text-align to center */ width: 400px; height: 60px; padding: 32px; text-align: center; /* Use the animation `blink` to repeat infinitely for a time period of 2.5s*/ animation-duration: 2.5s; animation-iteration-count: infinite; animation-direction: normal; animation-name: blink; /* The same can be written shorthand as */ /* -------------------------------------- */ /* animation: 2.5s infinite normal blink; */ } @keyframes blink { 0%, 100% { /* Defines the properties at these frames */ background: #333; color: white; } 50% { /* Defines the properties at these frames */ background: #ccc; color: black; border-radius: 48px; } }

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.