I am using CSS animations, when I load/reload component/page it jerks like it's moving from right to left, after that it works fine what to do

Question

 '@keyframes slideAnimationBackLarge': {
      '0%': { transform: 'translateX(15px)', opacity: 0 },
      '100%': { transform: 'translateX(0)', opacity: 1 },
    },

   '& .iconTwo': {
                position: 'absolute',
                animation: '$slideAnimationBackLarge 0.4s ',
                transition: ' all .4s ease',
                opacity: 1,}

I want it like when page/component loads it should not jerk it should be at translateX(0) position by default

Answer 1

There is lack of information that you want animation or not.

1. If you simply want component to load without animation then don’t use.
2. If you want right to left animation without jerk then try this i passed translateX at initial level as well

@keyframes slideAnimationBackLarge {
  0% { transform: translateX(15px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.iconTwo {
  position: absolute;
  transform: translateX(0); 
  opacity: 1;
  animation: slideAnimationBackLarge 0.4s;
  transition: all .4s ease;
}

<div>
  <div class="iconTwo">Krushna</div>
</div>

Let me know if you have any other requirement