Анимация svg в html

Нужно навесить на svg id'шник, а потом выполнить магию:

@keyframe animation1 {
  from {
    transform: translate3d(n,n,n);
  }
  to {
    transform: translate3d(k,k,k);
  }
}
@keyframe animation2 {
  from {
    transform: translate3d(k,k,k);
  }
  to {
    transform: translate3d(n,n,n);
  }
}
#animatedElement1 path {
  animation: animation1 2s ease;
  animation-fill-mode: forwards:
}
#animatedElement1:hover path {
  animation: animation2 2s ease;
  animation-fill-mode: forwards:
}

n, k - вычисляются обычно опытным путем