Charts.css

# Animations

Animating charts draws visitor's attention and can highlight important information. Use CSS @keyframes to animate elements without using JavaScript.

# Jumping Bars

Here is a basic example where the bars (<td> elements) jump every three seconds:

#animations-example .column td {
  animation: jumping-bars 3s linear infinite;
}
#animations-example .column tr:nth-of-type(even) td {
  animation-delay: 300ms;
}
@keyframes jumping-bars {
  0% { transform: translateY(   0px ); }
  2% { transform: translateY( -10px ); }
  4% { transform: translateY(   0px ); }
}
1
2
3
4
5
6
7
8
9
10
11
Animation Example #1
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Spinning Labels

Here is another simple example using labels (<th> elements) that spin every three seconds:

#animations-example .bar th {
  animation: spin-labels 2s linear infinite;
}
@keyframes spin-labels {
  0%   { transform: rotateX(   0deg ); }
  50%  { transform: rotateX( 360deg ); }
  100% { transform: rotateX( 360deg ); }
}
1
2
3
4
5
6
7
8
Animation Example #2 - The Richest People In America (Forbes 1918)
Country Gold Silver Silver
John D. Rockefeller 1,200
Henry Clay Frick 225
Andrew Carnegie 200
George Fisher Baker 150
William Rockefeller 150
Open in:

# Rising Bars

In this example, the bars rise from the bottom of the chart:

#animations-example .column tbody {
  overflow-y: hidden; /* remove this to see how it works */
}
#animations-example .column tbody th {
  background-color: #fff;
  z-index: 1;
}
#animations-example .column tbody td {
  animation: moving-bars 2s linear infinite;
}
@keyframes moving-bars {
  0%  { transform: translateY( 100% ); }
  30% { transform: translateY( 0 ); }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Animation Example #3
Year Progress
2016 100
2017 80
2018 60
2019 40
2020 20
Open in:

The same can be done with less code using the CSS scale() transformation:

#animations-example .column tbody td {
  transform-origin: bottom;
  animation: revealing-bars 2s linear infinite;
}
@keyframes revealing-bars {
  0%  { transform: scaleY( 0 ); }
  30% { transform: scaleY( 1 ); }
}
1
2
3
4
5
6
7
8
Animation Example #4
Year Progress
2016 20
2017 40
2018 60
2019 80
2020 100
Open in:

# Highlighting Data

A useful example of highlighting individual items with animations:



 




<tr>
  <th scope="row"> 2016 </th>
  <td style="--size: 1.0" class="highlighted">
    <span class="data"> 100 </span>
  </td>
</tr>
1
2
3
4
5
6
#animations-example .highlighted {
  animation: highlighted-bar 2s linear infinite;
}
@keyframes highlighted-bar {
  0%   { box-shadow: none; }
  50%  { box-shadow: 0 0 1px 0 black, 0 0 20px 5px darkgrey; }
  100% { box-shadow: none; }
}
1
2
3
4
5
6
7
8
Animation Example #5
Year Progress
2016 20
2017 40
2018 100
2019 50
2020 30
Open in:

# Color Gradient Animation

Now lets animate colors with gradients:

#animations-example .column td {
  background-image: linear-gradient(
    45deg,
    #956fd3,
    #e76ec2,
    #ff7fa2,
    #ffa782,
    #ffd86f,
    #faf982
  );
  background-size: 600%;
  animation: gradient-animation 3s linear infinite alternate;
}
@keyframes gradient-animation {
  0%   { background-position:   0%; }
  100% { background-position: 100%; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Animation Example #6
Year Progress
2016 20
2017 40
2018 100
2019 50
2020 30
Open in:

# Chart Animation

Finally lets animate the chart:

#animations-example .column {
  animation: chart-animation 2s ease-out infinite;
}
@keyframes chart-animation {
  0%   { transform: scale(1); }
  20%  { transform: scaleY(0.95) scaleX(1.05); }
  48%  { transform: scaleY(1.10) scaleX(0.90); }
  68%  { transform: scaleY(0.98) scaleX(1.02); }
  80%  { transform: scaleY(1.02) scaleX(0.98); }
  100% { transform: scale(1); }
}
1
2
3
4
5
6
7
8
9
10
11
Animation Example #7
Year Progress
2016 20
2017 40
2018 100
2019 50
2020 30
Open in:

← Development →