Why does a keyframes animation lag on render in a react app?

Question

This is my first question! I'm in the process of learning react and wanted to implement a slide transition to a landing page. My expectation was to have text slide onto the page on load, but instead when my component first renders, the transition produces a noticeable lag. (If it matters, this is occurring in Chrome Version 83.0.4103.116 (Official Build) (64-bit)).

  "react": "^16.13.1"

Initial Keyframes that lag on render:

  .landing {
    font-size: 100%;
    animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }


   @keyframes slide-left {
     0% {
       transform: translateX(0);
     }
     100% {
       transform: translateX(-100px);
     }
   }

After research, I added the CSS property of 'will-change' to help my loading time:

.landing {
  font-size: 100%;
  animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  will-change: transform;
}

this did not help,

and that is when I found react transition [https://reactcommunity.org/react-transition-group/transition][1]. I read that CSS Animations may produce lags unless using 'transform' or 'slide' properties and that this might be a better solution for lag time.

Current Component with Keyframes

import React, { Component } from 'react';
import '../SCSS/Header.scss';


class Header extends Component {
     render(){
       return (
         <divclassName="landing flex row justify-content-center">
           <div className="title row">
             <p>
               Alyssa Hooper
             </p>
           </div>
           <div className="job row">
             <p>
               lifelong learner; aspiring junior developer
             </p>
           </div>
         </div>
    );
  }
}




export default Header;

Answer 1

The issue was resolved. It was not keyframes lagging, but the google font I had imported on the keyframe text. A preload script with the google font was added into the head of my HTML doc and that solved the issue.