动画 SVG 路径对角线

Question

我有一个图表图标。 X Y 轴和指向右上角的箭头。我希望这个小箭头从右上角移出并从左下角回来。悬停时的平滑、可爱的小动画。可悲的是，移动left/right 属性在路径上不起作用，margin 也不起作用，所以我尝试使用translate。到目前为止，我得到了这个。无法弄清楚如何隐藏箭头，当它移动到左下：/有什么想法吗？ https://codepen.io/anon/pen/xepdXO

.chart {
  height: 66px;
  width: 88px;
  overflow: hidden;
 }

.arrow {
    animation: aaa 5s infinite;
}
  
@keyframes aaa {
  0% {
    transform: translate(0%);
  }
  50% {
    transform: translate(800%, -500%);
  }
  75% {
    transform: translate(0%);
  }
  100% {
    transform: translate(-800%, 500%);
  }
}

  <svg class="chart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path d="M992,832H64V160c0-17.7-14.3-32-32-32S0,142.3,0,160v704c0,17.7,14.3,32,32,32h960c17.7,0,32-14.3,32-32S1009.7,832,992,832
	z"/>
<path class="arrow" d="M992,192H736c-17.7,0-32,14.3-32,32s14.3,32,32,32h178.8L608.3,562.8L438,393.3c-12.5-12.5-32.7-12.4-45.2,0l-255.9,256
	c-12.5,12.5-12.5,32.8,0,45.2c6.3,6.3,14.5,9.4,22.7,9.4s16.4-3.1,22.7-9.3l233.3-233.4l170.3,169.5c12.4,12.4,32.8,12.4,45.2-0.1
	l329-329.3V480c0,17.7,14.3,32,32,32s32-14.3,32-32V224C1024,206.3,1009.7,192,992,192L992,192z"/>
</svg>

Answer 1

您可以像下面这样修正动画：

.chart {
  height: 66px;
  width: 88px;
  overflow: hidden;
 }

.arrow {
    animation: aaa 3s infinite linear;
}
  
@keyframes aaa {
  0%,100% {
    transform: translate(0%);
  }
  50% {
    transform: translate(400%, -250%);
  }
  50.1% {
    transform: translate(-400%, 250%);
  }
}

<svg class="chart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path d="M992,832H64V160c0-17.7-14.3-32-32-32S0,142.3,0,160v704c0,17.7,14.3,32,32,32h960c17.7,0,32-14.3,32-32S1009.7,832,992,832
	z"/>
<path class="arrow" d="M992,192H736c-17.7,0-32,14.3-32,32s14.3,32,32,32h178.8L608.3,562.8L438,393.3c-12.5-12.5-32.7-12.4-45.2,0l-255.9,256
	c-12.5,12.5-12.5,32.8,0,45.2c6.3,6.3,14.5,9.4,22.7,9.4s16.4-3.1,22.7-9.3l233.3-233.4l170.3,169.5c12.4,12.4,32.8,12.4,45.2-0.1
	l329-329.3V480c0,17.7,14.3,32,32,32s32-14.3,32-32V224C1024,206.3,1009.7,192,992,192L992,192z"/>
</svg>