Html 设置子元素和父元素的动画

问题

我有两个元素：一个动画正方形和箭头（静态）。 我也要开始移动箭头，箭头总是在正方形右边。有没有一种方法可以仅仅通过使用css来实现呢？而且，如果这在没有代码复制的情况下是可能的，那么在正方形的动画中添加一些偏移量？我试着想：在，：n子元素之后，将箭头设置为具有绝对/相对位置的正方形的子元素，但我没有达到目标

方形css示例

.animated-square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
}

@-webkit-keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}

.arrow_box {
  position: relative;
  background: #18ff08;
  border: 3px solid #0aff3b; 
  width:30px;
}

.arrow_box:after, .arrow_box:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(24, 255, 8, 0);
  border-left-color: #18ff08;
  border-width: 4px;
  margin-top: -4px;
}

.arrow_box:before {
  border-color: rgba(10, 255, 59, 0);
  border-left-color: #0aff3b;
  border-width: 8px;
  margin-top: -8px;
}

箭头css示例

.animated-square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
}

@-webkit-keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}

.arrow_box {
  position: relative;
  background: #18ff08;
  border: 3px solid #0aff3b; 
  width:30px;
}

.arrow_box:after, .arrow_box:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(24, 255, 8, 0);
  border-left-color: #18ff08;
  border-width: 4px;
  margin-top: -4px;
}

.arrow_box:before {
  border-color: rgba(10, 255, 59, 0);
  border-left-color: #0aff3b;
  border-width: 8px;
  margin-top: -8px;
}

下图显示了动画中所需正方形和箭头的相对位置

---

将箭头嵌套在正方形中是最明显的解决方案

/*动画*/
.动画广场{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
-webkit动画名称：示例；
-webkit动画持续时间：4s；
动画名称：示例；
动画持续时间：4s；
}
@-webkit关键帧示例{
0%{左：0px；顶：0px；}
25%{左：200px；顶：0px；}
50%{左：200px；顶：200px；}
75%{左：0px；顶：200px；}
100%{左：0px；顶：0px；}
}
@关键帧示例{
0%{左：0px；顶：0px；}
25%{左：200px；顶：0px；}
50%{左：200px；顶：200px；}
75%{左：0px；顶：200px；}
100%{左：0px；顶：0px；}
}
/*箭*/
.箭盒{
位置：绝对位置；
背景#18ff08；
边框：3px实心#0aff3b；
宽度：30px；
右：-36px；
最高：50%；
页边顶部：-5px；
}
.arrow\u box:之后，.arrow\u box:之前{
左：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.箭头框：在{
边框颜色：rgba（24255,8,0）；
左边框颜色：#18ff08；
边框宽度：4px；
利润上限：-4px；
}
.箭头框：在{
边框颜色：rgba（1025559,0）；
左边框颜色：#0aff3b；
边框宽度：8px；
利润上限：-8px；
}