How to prevent css keyframe animation to run on page load?

Answer 1

Building off of Tominator's answer, in React, you can apply it per component like so:

import React, { Component } from 'react'

export default class MyThing extends Component {
  constructor(props) {
    super(props);

    this.state = {
      preloadClassName: 'preload'
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.preloadClassName !== this.state.preloadClassName;
  }

  componentDidUpdate() {
    this.setState({ preloadClassName: null });
  }

  render() {
    const { preloadClassName } = this.state;

    return (
      

        
Hello World!
      
    )
  }
}

and the css class:

.preload * {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
  transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}