shake and spin?

ok so i  have two animations for my pfp , a spinning one and one to make it shake when you hover over it im wondering if anyone more knowledgeable than me can help me make them co exist as hovering over my pfp stops the spinning and when u stop hovering the spin starts over. 

i need a way to link the two animations so it continues spinning as its shaking 

this is the spin code (also makes pfp round)

@keyframes spin{

  from{ transform:rotate(0deg); }

  to{ transform:rotate(-360deg); }

}

.general-about .profile-pic img{

  border-radius: 50%;

  animation: spin 7s infinite linear;

}

this is the shake code 

.profile-pic:hover img { 

animation: shake 0.5s; 

animation-iteration-count: infinite; 

-webkit-transition: .5s ease-in; 

} 

@keyframes shake {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

}