CSS Animations
CSS3 animations let you change an element gradually from one style to another. To do this you must use the keyword ‘@keyframes’

Example: There is a <h1> tag. Within 5 seconds the colour of the <h1>’s text will change from blue to green:


/* Defines the animation */
@keyframes changeHeading {
0%   { color: blue; }
100% { color: green;}

/* applys the animation to the element */
h1 {
animation: 5s changeHeading;


By using the percentages we have more control over the changes. For example we could change the animation duration to 10 seconds and split the percentages by 10.


/* Defines the animation */
@keyframes changeParagraph {
0% { color: blue; }
10% { color: green; }
20% { color: yellow; }


90% { color: red; }
100% { color: black; }


/* applys the animation to the element */
p {
animation: 10s changeParagraph;


And the colour isn’t the only thing that you can change. Any css property can be done in the same way and you can change multiple properties in the same percentage e.g.


/* Defines the animation */
@keyframes changeDiv {
0% {
height: 200px;
font-size: 12pt;
background-color: red;


100% {
height: 100%;
font-size: 100pt;
background-color: blue;


/* applys the animation to the element */
div {
animation: 2s changeDiv;


The animation property has a lot more to offer as well. You  can add extra properties to it including in this order:


  1. Duration
  2. Timing function
  3. Delay
  4. Iteration-count
  5. Direction
  6. Fill-mode
  7. Play-state
  8. Name



div {
animation: 3s ease-in 1s 2 reverse both paused divAnimation;



Duration is specified in seconds e.g. 5s


Timing function

The timing function specifies the pace of the animation. The options are:

  • Ease – this transition starts slow, then gets fast, then finishes slow. This is the default option.
  • Linear – this transition runs at the same speed.
  • Ease-in – Slow start
  • Ease-out – Slow end
  • Cubic-bezier(n,n,n,n) – defines speed in four points as show below



The next option is where you can specify a delay time to start the animation e.g. 4s


Iteration Count

How many times the animation will run e.g. 4



In what order the animation will play. The options include

  • Normal – played as normal
  • Reverse – played in reverse direction
  • Alternate – played as normal every odd number 1, 3, 5, 7 etc. and in reverse every even number 2, 4, 6, etc.
  • Alternate-reverse – played in reverse direction every odd number and normal every even number.



Styles for when the animation is finished or delayed. The options include:

  • None – No styles will be set before or after the animation. This is the default value.
  • Forwards – After the animation ends its final values are kept.
  • Backwards – After the animation ends its initial values are reverted to.
  • Both – Forwards and backwards styles are both kept.



Used to pause and run animation. Options include paused and running. E.g:


div:hover {
animation-play-state: paused;



Used to reference the element to the animation property. As shown below for changing the heading “changeHeading”. This name can be anything but must be consistent as shown highlighted below.


/* Defines the animation */
@keyframes changeHeading {
0%   { color: blue; }
100% { color: green;}

/* applies the animation to the element */
h1 {
animation: 5s changeHeading;


Keep Experimenting

From my experience, the best thing to do is to experiment with all of these options to find out what works best. Best of luck!

For more information check out w3schools: https://www.w3schools.com/css/css3_transitions.asp



A 2-Minute Introduction To CSS Animations

by Michael Gannon time to read: 2 min