Создание svg картинки с анимацией

114

15 декабря 2020, 05:30

Подскажите, пожалуйста. Есть 2 картинки. Как из них сделать один svg файл с анимацией при наведении (фаербол летит от рук в сторону). Буду очень благодарен!

Answer 1

Вот так, наверное:

image#man + image { 
  opacity: 0; 
} 
 
image#man:hover + image { 
  transform: translate(600px,0); 
  animation: fireball 1s; 
} 
 
@keyframes fireball{ 
  0% { 
    opacity: 0; 
    transform:translate(0,0); 
  } 
  1% { 
    opacity: 1; 
    transform: translate(0,0); 
  } 
  100% { 
    opacity: 1; 
    transform: translate(600px,0); 
  } 
}

<svg viewbox="0 0 550 150"> 
  <image id="man" height="150" width="150"  
    xlink:href="https://i.stack.imgur.com/IDV5v.png"></image>  
  <image id="fireball" x="80" y="28" height="50" width="50"  
    xlink:href="https://i.stack.imgur.com/2eRcr.png"></image> 
</svg>