为什么我的CSS动画不能以我想要的方式工作

你好，我正在制作我的第一个网站。我想在那里做一个动画。我成功了。但问题是，动画不是从左到右，而是停留在一个位置，只是从不透明度0变为不透明度1。看起来父级阻止header main执行动画。你能帮我吗

*{
填充：0；
保证金：0；
}
html{
框大小：继承；
字体大小：62.5%；
}
身体{
字体大小：1.5rem；
线高：1.7；
填充：3rem；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
背景图像：径向梯度（#d8d6d6 20%，透明20%），
径向梯度（#fafa 20%，透明20%）；
背景色：#f8f2f2；
背景位置：0，20px，20px；
背景尺寸：10px 10px；
高度：200px；
宽度：100%；
}
.标题{
高度：95vh；
背景图像：线性渐变（到右下角，rgba（23,1,104,0.856），rgba（3,25,124,0.822）），
url（img\\finance.jpg）；
背景尺寸：封面；
-webkit剪辑路径：多边形（0,100%0,100%75,0,100%）；
剪辑路径：多边形（0,100%0,100%75,0,100%）；
文本对齐：居中；
}
.姓名{
位置：绝对位置；
左：50%；
最高：50%；
转换：转换（-50%，-100%）；
}
.总管{
颜色：白色；
字体大小：6.5rem；
字母间距：1.5雷姆；
动画：moveInLeft 3s放松；
}
.头接头{
颜色：白色；
显示：块；
字体大小：2.5rem；
字母间距：0.8rem；
线高：2.2；
}
@关键帧moveInLeft{
0% {
不透明度：0；
-webkit转换：translateX（-6rem）；
转换：translateX（-6rem）；
}
80% {
-webkit转换：translateX（0.6rem）；
转换：translateX（0.6rem）；
}
100% {
不透明度：1；
-webkit转换：转换（0）；
变换：平移（0）；
}
}

个人网站
*我的名字*
*我的职业*

我自己做的。您需要将显示：块；在标题中（主标题：）

*{
填充：0；
保证金：0；
}
html{
框大小：继承；
字体大小：62.5%；
}
身体{
字体大小：1.5rem；
线高：1.7；
填充：3rem；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
背景图像：径向梯度（#d8d6d6 20%，透明20%），
径向梯度（#fafa 20%，透明20%）；
背景色：#f8f2f2；
背景位置：0，20px，20px；
背景尺寸：10px 10px；
高度：200px；
宽度：100%；
}
.标题{
高度：95vh；
背景图像：线性渐变（到右下角，rgba（23,1,104,0.856），rgba（3,25,124,0.822）），
url（img\\finance.jpg）；
背景尺寸：封面；
-webkit剪辑路径：多边形（0,100%0,100%75,0,100%）；
剪辑路径：多边形（0,100%0,100%75,0,100%）；
文本对齐：居中；
}
.姓名{
位置：绝对位置；
左：50%；
最高：50%；
转换：转换（-50%，-100%）；
}
.总管{
颜色：白色；
字体大小：6.5rem；
字母间距：1.5雷姆；
动画：moveInLeft 3s放松；
显示：内联块；
}
.头接头{
颜色：白色；
显示：块；
字体大小：2.5rem；
字母间距：0.8rem；
线高：2.2；
}
@关键帧moveInLeft{
0% {
不透明度：0；
-webkit转换：translateX（-6rem）；
转换：translateX（-6rem）；
}
80% {
-webkit转换：translateX（0.6rem）；
转换：translateX（0.6rem）；
}
100% {
不透明度：1；
-webkit转换：转换（0）；
变换：平移（0）；
}
}

个人网站
*我的名字*
*我的职业*

请将您的问题添加到HTML中，使问题包含一个。@AndyRay您是否错过了

动画：moveInLeft 3s ease out