动画子元素以及父元素

Question

问题

我有两个元素：动画方块和箭头（静态）。 我也想开始移动箭头，箭头一直在广场的右边中间。有没有办法只使用CSS？而且，如果这可能没有代码重复动画的方块，为其添加一些偏移？我试着想到：在：，nth-child之后，将箭头设置为具有绝对/相对位置的正方形的子元素，但是我没有达到目标。

Square 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 css的示例

.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;
}

Jsfiddle example of two types of elements

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

Answer 1

将箭头嵌入方块中将是最明显的解决方案......

/*animation*/
.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;}
}

@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*/
.arrow_box {
  position: absolute;
  background: #18ff08;
  border: 3px solid #0aff3b; 
  width:30px;
 right: -36px;
    top: 50%;
    margin-top: -5px;
}

.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;
}

<div class="animated-square">
    <div class="arrow_box"></div>
</div>