Анимировать диагональ пути SVG

#css #animation #svg

#css #Анимация #svg

Вопрос:

У меня есть значок диаграммы. Ось 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>

1. вы хотите, чтобы он отображался только как движение вверх?? и не опускается??

2. откуда именно вы хотите, чтобы он появлялся и исчезал??

3. @JoykalInfotech Я хочу, чтобы стрелка выходила в правом верхнем углу — скрыть — и возвращалась слева-снизу. У меня проблемы со скрытой частью :/

Ответ №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>