嘿，这个问题其实很好解决！核心就是利用CSS的animation-fill-mode属性，它专门用来控制动画结束后元素的状态。

你只需要在.area类的动画声明里加上forwards这个值，就能让元素保持动画最后一帧的状态。

修改后的代码如下：

.area { 
  display: flex; 
  position: relative; 
  animation: move 5s linear forwards; /* 新增forwards参数 */
}
@keyframes move { 
  0% { left: -20%; } 
  100% { left: 20%; } 
}

顺便给你补充下animation-fill-mode的几个常用取值，方便你后续灵活使用：

• forwards：动画结束后，元素固定保持最后一个关键帧的样式
• backwards：如果动画设置了延迟，在延迟期间就会提前应用第一个关键帧的样式
• both：同时生效forwards和backwards的效果

这样修改后，你的元素在动画执行完毕后就会稳稳停在left: 20%;的位置啦！

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