# Animations

By animating the chart you can add smooth interactions to make your chart even more interactive. Use CSS @keyframes to animate elements without using JavaScript.

# Jumping Bars

Here is a basic example where the bars (<td> elements) are jumping every 3 seconds.

#animations-example-1 td {
  animation: jumping-bars 3s linear infinite;
}
#animations-example-1 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 examples with labels (<th> elements) spinning every 3 seconds.

#animations-example-2 th {
  animation: spin-labels 3s linear infinite;
}
@keyframes spin-labels {
  0%   { transform: rotateX(   0deg ); }
  40%  { 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:

# Moving Bars

Another example with moving bars. Revealing themselves from the bottom.

#animations-example-3 tbody {
  overflow-y: hidden; /* remove this to see how it works */
}
#animations-example-3 tbody th {
  background-color: #fff;
  z-index: 1;
}
#animations-example-3 tbody td {
  animation: moving-bars 4s linear infinite;
}
@keyframes moving-bars {
  0%  { transform: translateY( 100% ); }
  15% { 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 scale();

#animations-example-4 tbody td {
  transform-origin: bottom;
  animation: revealing-bars 4s linear infinite;
}
@keyframes revealing-bars {
  0%  { transform: scaleY( 0 ); }
  15% { 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 to 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-5 .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 the colors with gradients.

#animations-example-6 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: