我正在使用CSS动画，当我加载/重新加载组件/页面时，它会像从右向左移动一样猛烈，之后它就可以正常工作了

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,}

我希望它像页面/组件加载时不应该猛烈，默认情况下应该位于translateX(0)位置

Answer 1

缺少您是否想要动画的信息。

1. 如果您只是希望组件在没有动画的情况下加载，则不要使用。
2. 如果你想要从右到左的动画而没有急动，那么试试这个我也在初始级别通过了translateX

@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>

如果您有任何其他要求，请告诉我