Introduction to 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 percentage’s 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 aswell. 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

 

E.g:

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

 

Duration

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

 

Delay

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

 

Direction

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.

 

Fill-mode

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.

 

Play-state

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

 

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

 

Name

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;
}

 

Finally

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

 

Leave a Reply

Your email address will not be published.