html - 为子元素和父元素设置动画

Question

问题

我有两个元素:动画方 block 和箭头(静态)。 我也想开始移动箭头，箭头一直在正方形右手边的中间。有没有办法只使用 css 来做到这一点？而且，如果没有广场的代码复制动画这是可能的，那么添加一些偏移量？想过:after, :nth-child, 将箭头设置为方 block 的绝对/相对位置的子元素，但没有达到目的。

方形 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;}
}

箭头 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

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

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>