How to make CSS animation jank free? - css

Question

In my react app I'm using CSS animations in some components but some time animation are not smooth.
For example like CSS spinner loader animation. How to make it jank Free?
When we reload the the page sometimes spinner stuck while rotating.
Loader React component
import React from 'react';
import PropTypes from 'prop-types';
import './loader.css';
class Loader extends React.Component {
render() {
if (this.props.show) {
return (
<div className="loader-animation-container">
<div className="spinner-container">
<div className="spinner" />
</div>
</div>
);
}
return null;
}
}
Loader.propTypes = {
show: PropTypes.bool.isRequired
};
Loader.defaultProps = {
show: false
};
export default Loader;
LESS for the component:
.loader-animation-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
.spinner-container {
position: fixed;
top: 50%;
left: 50%;
padding: 5px;
border-radius: 20px;
transform: translate(-50%);
z-index: 6;
background-color: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12);
.spinner {
height: 20px;
width: 20px;
animation: rotate 0.8s infinite linear;
border: 2px solid #ff3e6c;
border-right-color: transparent;
border-radius: 20px;
will-change: transform;
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
}

Answer 1

You need to move the #keyframes declaration out to the "global" scope. Keyframes can't be nested inside a selector.
.loader-animation-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
.spinner-container {
position: fixed;
top: 50%;
left: 50%;
padding: 5px;
border-radius: 20px;
transform: translate(-50%);
z-index: 6;
background-color: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12);
.spinner {
height: 20px;
width: 20px;
animation: rotate 0.8s infinite linear;
border: 2px solid #ff3e6c;
border-right-color: transparent;
border-radius: 20px;
will-change: transform;
}
}
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Working JSFiddle Demo