页面加载/刷新时div内容仅执行一次过渡动画问题

你的问题出在两个关键设置上：一是动画被设为无限循环，二是动画结束后元素会自动回到初始样式。只需调整CSS的动画属性就能解决：

1. 将animation-iteration-count: infinite改为animation-iteration-count: 1（也可以直接移除这个属性，因为默认值就是1次），确保动画仅执行一次
2. 添加animation-fill-mode: forwards，让动画结束后元素保持最后一帧的样式

修改后的完整CSS代码：

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  height: 100vh;
  padding: 100px 250px;
  font-family: cursive;
  color: white;
  animation-name: mymove;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /* 核心：保留动画最终状态 */
}

@keyframes mymove {
  from {
    color: white;
  }

  to {
    color: black;
  }
}

HTML代码无需修改：

<div class="container">
  <h1>Hello,</h1>
  <h2>This is Abhishek.</h2>
</div>

调整后，页面加载或刷新时文字会从白色过渡到黑色，动画仅执行一次，且结束后保持黑色不变，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Abhishek Yadav