我正在尝试使CSS动画的右手向上移动然后波动，如何在CSS中使用关键帧来实现这一目标？顺便说一句，不要在这里运行代码片段，请尝试在Google chrome中的单独文件中运行它，以使其正确显示。我还希望它整洁，以便在挥动时仍将手臂固定在衬衫上，并且手臂和袖子应以相同的速度运动，这要感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<title>Waving Person</title>
<style>
body{
background-color:#F8FF09;
overflow-x:hidden;
}
.face{
width:94px;
height:94px;
border-radius: 0 0 90px 90px;
background-color:#ffecb3;
position:absolute;
top:25.2%;
left:46%;
}
.h1{
width:105px;
height:35px;
background:saddlebrown;
border-radius: 20px 20px 20px 20px;
position:absolute;
top:24.5%;
left:45.5%;
}
.h2{
height:45px;
width:75px;
border-radius: 45px;
background:saddlebrown;
position:absolute;
top:18.5%;
left:46.3%;
}
.eye1{
background-color:white;
border-radius:50%;
height:20px;
width:20px;
position:absolute;
top:30.7%;
left:46.9%;
}
.eye2{
background-color:white;
border-radius:50%;
height:20px;
width:20px;
position:absolute;
top:30.7%;
left:50.1%;
}
.eyeball,.eyeball2{
height: 13px;
width: 13px;
background-color: black;
border-radius: 50%;
position:absolute;
}
.eyeball{
top:31.2%;
left:47.2%;
}
.eyeball2{
top:31.2%;
left:50.3%;
}
.d1,.d2{
width:6px;
height: 6px;
border-radius: 50%;
background-color: white;
position:absolute;
}
.d1{
top:31.2%;
left:47.2%;
}
.d2{
top:31.2%;
left:50.8%;
}
.mouth{
width: 20px;
height: 20px;
background:red;
-webkit-border-radius: 20px 0px;
border-radius: 20px 0px;
transform: rotate(45deg);
position: relative;
left:649px;
top:220px;
}
.b1,.b2{
background-color:#ffb3b3;
width:10px;
height:5px;
border-radius:50%;
position:relative;
}
.b1{
left:625px;
top:202px;
}
.b2{
left:685px;
top:197px;
}
.neck1{
width:20px;
height:25px;
background-color:#ffecb3;
position:relative;
left:650px;
top:220px;
}
.neck2{
border-radius: 0 0 90px 90px;
height:25px;
width:45px;
background-color:#ffecb3;
position:relative;
left:637px;
top:220px;
}
.e1,.e2,.e3,.e4,.e5,.e6{
background-color:black;
width:10px;
height:1.1px;
transform:rotate(85deg);
position:relative;
}
.e1{
left:622.2px;
top:114px;
}
.e2{
left:628.2px;
top:113px;
}
.e3{
left:635.2px;
top:113px;
}
.e4{
left:666px;
top:112px;
}
.e5{
left:673px;
top:109px;
}
.e6{
left:679px;
top:110px;
}
.t1{
width:80px;
height: 120px;
background-color:crimson;
border-radius: 15px;
position:relative;
left:625px;
top:190px;
z-index:-1;
animation:change 2s infinite;
}
.t2{
border-bottom: 70px solid crimson;
border-left: 35px solid transparent;
border-right: 40px solid transparent;
border-radius:15px;
height: 0;
width: 125px;
position:relative;
left:570px;
top:170px;
}
.belt{
position:relative;
left:625px;
top:65px;
}
.hand1{
position: relative;
background-color: #ffecb3;
height: 100px;
width: 20px;
border-radius:10px;
position:relative;
left:595px;
bottom:50px;
transform: rotate(25deg);
}
.s1{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color:crimson;
height:90px;
width:20px;
transform:rotate(25deg);
position:relative;
left:603px;
bottom:260px;
}
.hand2{
position: relative;
background-color: #ffecb3;
height: 100px;
width: 20px;
border-radius:10px;
position:relative;
left:715px;
bottom:155px;
transform:rotate(-25deg);
}
.s2{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color:crimson;
height:90px;
width:20px;
transform:rotate(-25deg);
position:relative;
left:707px;
bottom:357px;
}
</style>
</head>
<body>
<div class="face"></div>
<div class="h1"></div>
<div class="h2"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eyeball"></div>
<div class="eyeball2"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="mouth"></div>
<div class="teeth"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="neck1"></div>
<div class="neck2"></div>
<div class="e1"></div>
<div class="e2"></div>
<div class="e3"></div>
<div class="e4"></div>
<div class="e5"></div>
<div class="e6"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="belt">
<img src="https://i.ibb.co/2qCZQJv/5-2-belt-png-hd-thumb.png width="100px" height="80px""></div>
<div class="hand1"></div>
<div class="hand2"></div>
<div class="s1"></div>
<div class="s2"></div>
</body>
</html>