# Motion Effects
Motion effects enhance your charts when users interact with elements using mouse (opens new window) or touch (opens new window) events. The simplest example is CSS hover effects. You can add motion effects when the mouse hovers over the entire chart or an individual inner element. Use your imagination and CSS skills to create beautiful interaction effects.
Here are some basic examples leveraging CSS :hover
pseudo-class.
# Data Hover Effect
A simple background color change when the user hovers over data items:
#motion-effect tr {
transition-duration: 0.3s;
}
#motion-effect tr:hover {
background-color: rgba(0, 0, 0, 0.2);
}
#motion-effect tr:hover th {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
}
2
3
4
5
6
7
8
9
10
# Dataset Opacity Effect
Reverse opacity effect when hovering over datasets:
#motion-effect td {
transition-duration: 0.3s;
opacity: 0.5;
}
#motion-effect td:hover {
opacity: 1;
}
2
3
4
5
6
7
# Scale Data
You can scale the data when hovering over the chart.
#motion-effect td .data {
transition-duration: 0.6s;
transform: scale(0);
}
#motion-effect td:hover .data {
transform: scale(1);
}
2
3
4
5
6
7
Year | Progress |
---|---|
2016 | 20 |
2017 | 40 |
2018 | 60 |
2019 | 80 |
2020 | 100 |
# Grayscale Chart
My favorite effect is the grayscale effect. The chart becomes colorful only when the user hovers over chart.
#motion-effect {
transition-duration: 1s;
filter: grayscale(100%);
}
#motion-effect:hover {
filter: none;
}
2
3
4
5
6
7
← 3D Effects Animations →