Keyframe in SVG animation cancelling previous keyframe - css

I have 2 Keyframes, each using "transform" property and then I tried to call both of them using animation property, however if I have the second line of animation with the "fill-mode" property set to "backwards", the first keyframe that is called using the animation property is ignored? why so?
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">
<g class="all">
<clippath id="bg">
<circle cx="348" cy="356" r="129.2"/>
</clippath>
<g class="stars" clip-path="url(#bg)">
<circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2"/>
<path class="star" opacity="0.75" fill="#FFFFFF" d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1
c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7
c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3,12.9c-3,0.7-8.7,2-14.1,3.2c-4.7,1.2-8.7,2.2-11.6,3c-5.7,1.5-6.9,2.2-7.7,3.5
c-0.7,1-1,2.2-0.5,3.5c0.5,2,2,4.9,15.6,13.4c4.5,2.7,8.7,5.4,11.4,6.9c-0.5,3.2-1.5,9.4-2.5,15.6c-0.7,5.4-1.5,9.6-1.7,12.9
c-0.7,5.9-0.7,7.9,1.2,9.4c0.7,0.5,1.7,1,3.7,0.7c1.2-0.2,4.5-0.7,18.6-10.9c5.4-4,10.4-7.9,13.1-10.1c3.2,1.2,9.2,3.7,15.3,5.9
c16.3,5.9,19.5,5.4,20.8,5.2c1.7-0.2,2.7-1.2,3.2-1.7c1.5-2,0.7-4-1.5-9.4c-1.2-3-3-6.9-5.2-11.6c-2.7-5.7-5.4-11.4-6.9-14.3
c2-2.2,5.4-5.9,8.9-9.9c10.6-12.1,11.4-15.3,11.1-17.3C411.5,339.4,410.7,338.4,409.7,337.4z"/>
<path class="star" opacity="0.6" fill="#FFFFFF" d="M310.3,334.7c-0.5-0.7-1-1.2-4-2.5c-1.5-0.7-3.5-1.5-6.2-2.5
c-3-1.2-5.9-2.2-7.7-3c0-1.5-0.2-4.5-0.7-7.4c-0.7-7.4-1.5-10.1-2-11.1c-0.2-1.2-1.2-1.7-1.5-1.7c0,0,0,0-0.2,0c0,0,0,0-0.2,0
c-0.2,0-1.2-0.2-2.2,0.7c-1,0.7-3,2.5-7.7,8.4c-1.5,2.5-3,4.7-4,5.9c-1.7-0.2-4.7-1-7.9-1.5c-2.7-0.5-4.9-1-6.4-1.2
c-3.5-0.5-4-0.5-4.7,0c-0.7,0.2-1,1-1.2,1.5c-0.2,1.2,0,3,4.9,10.4c1.5,2.5,3.2,4.7,4.2,6.2c-1,1.5-3,4.5-4.7,7.4
c-1.7,2.5-3,4.5-3.7,6.2c-1.7,3-2.2,4-1.5,5.2c0.2,0.5,0.7,1,1.7,1.2c0.7,0.2,2.5,0.7,11.9-1.2c3.7-0.7,7.2-1.7,8.9-2.2
c1.2,1.5,3.7,4,6.4,6.4c6.9,6.7,8.7,7.2,9.4,7.4c1,0.2,1.7,0,2-0.2c1.2-0.7,1.2-1.7,1.5-5.2c0-1.7,0-4.2,0-7.2
c0-3.5-0.2-6.9-0.2-8.9c1.5-0.7,4.2-1.7,6.7-3c8.2-3.7,9.2-5.2,9.6-6.2C310.5,336.2,310.5,335.5,310.3,334.7z"/>
<path class="star" opacity="0.4" fill="#FFFFFF" d="M446.1,360.4c-0.5-0.2-0.7-0.2-3-0.2c-1,0-2.5,0.2-4.2,0.5
c-2,0.2-4,0.5-4.9,0.7c-0.5-0.7-1.5-2.2-2.5-3.7c-2.7-4-3.7-4.9-4.5-5.4c-0.5-0.7-1.2-0.5-1.5-0.5l0,0l0,0c-0.2,0-0.7,0.2-1,1
c-0.2,0.7-1,2.2-1.7,6.9c-0.2,1.7-0.5,3.5-0.7,4.5c-1,0.2-3,1-4.7,1.5c-1.7,0.5-3,1-4,1.2c-2,0.7-2.2,1-2.5,1.5
c-0.2,0.2-0.2,0.7,0,1.2c0.2,0.7,0.7,1.5,5.7,4.2c1.5,0.7,3.2,1.7,4,2c0,1.2-0.2,3.2-0.5,5.4c-0.2,1.7-0.2,3.5-0.2,4.5
c0,2,0,2.7,0.7,3.2c0.2,0.2,0.7,0.2,1.2,0.2c0.5,0,1.5-0.2,6.2-4.2c1.7-1.5,3.5-3,4.2-3.7c1.2,0.2,3.2,1,5.4,1.7
c5.7,1.5,6.9,1.2,7.2,1.2c0.5-0.2,1-0.5,1-0.7c0.5-0.7,0.2-1.2-0.7-3.2c-0.5-1-1.2-2.2-2.2-4c-1-2-2.2-3.7-2.7-4.7
c0.7-0.7,1.7-2.2,2.7-3.7c3.2-4.5,3.5-5.4,3.5-6.2C446.6,361.2,446.3,360.7,446.1,360.4z"/>
</g>
</g>
</svg>
</body>
</html>
CSS
/* --------------------------
Base
--------------------------- */
body {
padding-top: 60px;
background: #0f4e7a;
}
svg {
margin: auto;
display: block;
width: 28%;
}
/* --------------------------
Keyframes
--------------------------- */
#keyframes move{
0%{
transform: translate3d(0,300%,0);
}
60%{
transform: translate3d(0,-20px,0);
}
100%{
transform: translate3d(0,0,0);
}
}
#keyframes rotate {
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
/* --------------------------
SVG Styles
--------------------------- */
.all *{
transform-origin: 50% 50%;
transform-box: fill-box;
}
.star:nth-of-type(1) {
transform: translate3d(0,0,0);
animation: move 1s 0s ease-out backwards,
rotate .4s 1.5s linear backwards;
}
.star:nth-of-type(2) {
animation: move 1s .5s ease-out backwards;
}
.star:nth-of-type(3) {
animation: move 1s 1s ease-out backwards;
}
The middle star with the class ".star:nth-of-type(1)" only scale however if I change line 57 from this
rotate .4s 1.5s linear backwards;
to that
rotate .4s 1.5s linear forwards;
the middle star both translates and scales, what is the reason behind this behavior ?

Related

How to animate a (path) element inside an svg to scale larger and smaller without moving position visually

I have an svg with a few elements that looks something like this:
I would like to create an animation where each element "pulses" (grows about 20% in size and then returns to its normal size without moving to a different position) one after the other, going around in a circle on repeat.
I began creating a css animation for this but my attempts to add a scale animation clearly were not using the correct center point because every scaling movement would shift that element to a different position as well.
I tried exploring different values for the property transform-origin, but none seemed to achieve the desired behaviour.
I have included a demo reprex that shows the behaviour:
#Ellipse_1 {
/* No transform-origin */
animation: pulse 2s linear infinite alternate;
animation-delay: 2.6s fill-opacity: 50%;
}
#Ellipse_2 {
/* transform-origin same as circle's center location */
transform-origin: 4 8;
fill-opacity: 50%;
animation: pulse 2s linear infinite alternate;
animation-delay: 3.4s
}
#Ellipse_3 {
/* Trying transform-origin center center keyword */
transform-origin: center center;
fill-opacity: 50%;
animation: pulse 2s linear infinite alternate;
animation-delay: 3s
}
#Path_1 {
/* Trying transform-origin center keyword */
transform-origin: center;
animation: pulse 2s linear infinite alternate;
animation-delay: 4s
}
#Path_2 {
/* This goes off screen as soon as animation starts */
animation: pulse 2s linear infinite alternate;
animation-delay: 4s
}
#keyframes pulse {
0% {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
}
}
<svg id="shapes" data-name="shapes data" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 100 100">
<circle id="Ellipse_1" data-name="Ellipse 1" cx="2.083" cy="2.083" r="2.083" transform="translate(14 3)" fill="red"/>
<path id="Path_1" data-name="Path 259" d="M60.749,74.282a103.267,103.267,0,0,0-5.686,23.5.459.459,0,0,1-.455.408H48.887a.46.46,0,0,1-.453-.38l-3.1-17.357a.458.458,0,0,1,.321-.519A75.754,75.754,0,0,0,60.24,73.846C60.708,73.591,60.936,73.783,60.749,74.282Z" transform="translate(-45.326 -63.944)" fill-rule="evenodd" fill="green"/>
<circle id="Ellipse_2" data-name="Ellipse 2" cx="2.083" cy="2.083" r="2.083" transform="translate(4 8)" fill="blue"/>
<circle id="Ellipse_3" data-name="Ellipse 3" cx="1.62" cy="1.62" r="1.62" transform="translate(21.942)" fill="green"/>
<path id="Path_2" data-name="Path 2" d="M97.486,54.462C94.879,58.549,90.751,66.907,88.6,81.11a.6.6,0,0,1-.572.505,16.478,16.478,0,0,0-8.995,3.049.355.355,0,0,1-.562-.322,90.68,90.68,0,0,1,6.77-25.419.966.966,0,0,1,.352-.4q1.521-.866,3.1-1.629a.016.016,0,0,1,.009,0,50.611,50.611,0,0,1,8.261-3.124h0A.465.465,0,0,1,97.486,54.462Z" transform="translate(-66.545 -51.149)" fill-rule="evenodd" fill="red"/>
</svg>

When you "overwrite" the transform using CSS the translate is removed. Here I moved the transform/translate to a parent <g>. So each element is moved using the transform in <g> and then each element is scaled using CSS.
The circles are easy to scale because their origin is in the center already, but the other shapes need either to be moved so that 0,0 is in the center (change all values in the d attribute) or use transform-origin to move the origin. I guess that the result here is a combination - that could be optimized (up to you :-)).
#Ellipse_1 {
/* No transform-origin */
animation: pulse 2s linear infinite alternate;
animation-delay: 2.6s fill-opacity: 50%;
}
#Ellipse_2 {
/* transform-origin same as circle's center location */
fill-opacity: 50%;
animation: pulse 2s linear infinite alternate;
animation-delay: 3.4s
}
#Ellipse_3 {
/* Trying transform-origin center center keyword */
fill-opacity: 50%;
animation: pulse 2s linear infinite alternate;
animation-delay: 3s
}
#Path_1 {
/* Trying transform-origin center keyword */
transform-origin: 50px 80px;
animation: pulse 2s linear infinite alternate;
animation-delay: 4s
}
#Path_2 {
/* This goes off screen as soon as animation starts */
transform-origin: 80px 70px;
animation: pulse 2s linear infinite alternate;
animation-delay: 4s
}
#keyframes pulse {
0% {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
}
}
<svg id="shapes" data-name="shapes data" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g transform="translate(14 3)">
<circle id="Ellipse_1" data-name="Ellipse 1" cx="2.083" cy="2.083" r="2.083" fill="red"/>
</g>
<g transform="translate(-45.326 -63.944)">
<path id="Path_1" data-name="Path 259" d="M60.749,74.282a103.267,103.267,0,0,0-5.686,23.5.459.459,0,0,1-.455.408H48.887a.46.46,0,0,1-.453-.38l-3.1-17.357a.458.458,0,0,1,.321-.519A75.754,75.754,0,0,0,60.24,73.846C60.708,73.591,60.936,73.783,60.749,74.282Z" fill-rule="evenodd" fill="green"/>
</g>
<g transform="translate(4 10)">
<circle id="Ellipse_2" data-name="Ellipse 2" r="2.083" fill="blue"/>
</g>
<g transform="translate(22 3)">
<circle id="Ellipse_3" data-name="Ellipse 3" r="1.62" fill="green"/>
</g>
<g transform="translate(-66.545 -51.149)">
<path id="Path_2" data-name="Path 2" d="M97.486,54.462C94.879,58.549,90.751,66.907,88.6,81.11a.6.6,0,0,1-.572.505,16.478,16.478,0,0,0-8.995,3.049.355.355,0,0,1-.562-.322,90.68,90.68,0,0,1,6.77-25.419.966.966,0,0,1,.352-.4q1.521-.866,3.1-1.629a.016.016,0,0,1,.009,0,50.611,50.611,0,0,1,8.261-3.124h0A.465.465,0,0,1,97.486,54.462Z" fill-rule="evenodd" fill="red"/>
</g>
</svg>

Chain keyframes animations

Hello I'am trying to chain two animations.
Now what happens is that after moveUp finished, my triangle jump back to place and then starts scaleDown. Why triangle jumps back when i specify forwards parametr which tells it should stop at last keyframes option.
I have no idea what goes wrong here.
#bottom-rect {
animation: moveUp 2s forwards, scaleDown 1s 1s forwards;
}
#keyframes moveUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-25%);
}
}
#keyframes scaleDown {
0% {
transform: scaleY(1);
transform-origin: center;
transform-box: fill-box;
}
100% {
transform: scaleY(0);
transform-origin: center;
transform-box: fill-box;
}
}
<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>
The effect i need to achieve is basically this: 0sec (moveUp starts) -> 1sec (scaleDown starts) -> 2s both finished.

It's actually possible to do additive animations in CSS. In this case you can just add an element around your path tag. So with an svg we can add an additional g tag that I will name animation2 in my example.
#bottom-rect {
animation: scaleDown 1s 1s forwards;
}
#animation2{
animation: moveUp 2s forwards;
}
#keyframes moveUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-25%);
}
}
#keyframes scaleDown {
0% {
transform: scaleY(1);
transform-origin: center;
transform-box: fill-box;
}
100% {
transform: scaleY(0);
transform-origin: center;
transform-box: fill-box;
}
}
<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<g id = "animation2">
<path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
</g>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>

Does CSS3 animation create memory leaks?

http://jsfiddle.net/q5yncg61/
.vertical-line {
/* will-change: transform; */
stroke-dasharray: 2;
-webkit-animation: dash 25s infinite linear;
animation: dash 18s infinite linear;
stroke-width: 2px;
}
.firstCircle {
fill: #333333;
stroke-width: 3px;
stroke-color: #979797;
transform: scale(1);
transform-origin: center center;
animation: pulse 5s linear infinite;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.secondCircle {
animation-delay: 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 100;
}
}
#keyframes pulse {
0% {
transform: scale(0.75);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
<svg viewBox="0 0 100 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="draw" stroke="black" stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="square">
<line x1="50%" y1="0%" x2="50%" y2="100%" id="vertical-line" stroke="#979797" stroke-width="0.5"></line>
<circle class="firstCircle" stroke="#555555" stroke-width="5" r="25" cx="50" cy="50" fill="#777777"></circle>
<circle class="secondCircle" stroke="#999999" r="25" cx="50" cy="50" fill="#999999"></circle>
</g>
</svg>
On my local, it's running a lightly more complex version of the jsfiddle example but same elements repeated 5 times, not in a loop. On Safari I kept getting a memory issue after the fan was running at warp speed. Is this an issue with rendering from GPU instead of CPU? Is this a memory leak issue?
If not, are there any ideas what may be causing the issue? I've verified it is the svg causing the slow performance as I've removed it and the page was loading fine. Any insights are appreciated.

sure, the 'transition' of CSS cause a obviously Memory Leak on Chrome at least.

SVG CSS animation after hover off

I tried several ways to svg animation, but i can't do finish animation after hover off. I have seen some hints on stackoverflow, but in my situation it does not work. In my example I have few options animations in keyframes.
https://codepen.io/GuyDiamond/pen/QBpQze
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg:hover .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
transition: .5s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}

You can't do what you want with pure CSS. You need to use JS.
Here's one way, using the animationiteration event, which fires each time the animation loop ends.
// Get the SVG DOM object
var mysvg = document.getElementById("mysvg");
var running = false;
// On hover add the "run" class, which makes the animation run
mysvg.addEventListener("mouseenter", function(evt) {
evt.target.classList.add("run");
running = true;
});
// On mouse out, arrange to remove the "run" class when the animation loop ends
mysvg.addEventListener("mouseleave", function(evt) {
running = false;
});
// When animation loop ends, remove the "run" class if we no longer want to continue running
mysvg.addEventListener("animationiteration", function(evt) {
if (!running) {
evt.target.ownerSVGElement.classList.remove("run");
}
});
.box {
width: 300px;
height: 500px;
}
<div class="box">
<svg id="mysvg" width="100%" height="100%" viewBox="-30 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg .heart {
}
.run .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
</style>
</svg>
</div>

You mean the animation ends suddenly? That's because you've defined the transition in the hover so as soon as the hover ends there's no active transition any more.
.box {
width: 300px;
height: 500px;
}
<div class="box">
<svg width="100%" height="100%" viewBox="-30 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg .heart {
transition: .5s;
}
svg:hover .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards; }
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
</style>
</svg>
</div>

By changing the animation-play-state on hover I think it could work
https://codepen.io/dok/pen/ZjKGRE
svg #heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: paused;
}
svg .heart:hover #heart {
animation-play-state: running;
}

CSS animation rotate then wiggle SVG

I have an SVG compass with an arrow in it. I want to be able to add a class to the arrow and have it rotate a certain degree then stay there and wiggle.
I have the rotation and wiggle working just not together. Not sure how to combine the two so they work together. Here is my code:
div {
max-width: 40%;
}
.st0 {
fill: none;
stroke: #505050;
stroke-width: 4.11;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #808080;
stroke-width: 2.57;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st2 {
fill: #505050;
}
.st3 {
opacity: 0.5;
}
.st4 {
fill: none;
}
/* Fill Colors */
.green {
fill: rgba(21, 255, 0, 0.5);
}
.dgreen {
fill: rgba(12, 140, 0, 0.5);
}
.red {
fill: rgba(255, 42, 0, 0.5);
}
.dred {
fill: rgba(140, 23, 0, 0.5);
}
/* Arrow */
#arrow {
transform-origin: 50% 59.7%;
animation-name: wiggle;
animation-duration: 1s;
animation-fill-mode: forward;
-webkit-animation-fill-mode: forward;
-webkit-animation-iteration-count: infinite;
/* Safari 4.0 - 8.0 */
animation-iteration-count: infinite;
}
/* Rotations */
.north#arrow {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.northEast#arrow {
-webkit-transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.west#arrow {
-webkit-transform: rotate(135deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.southWest#arrow {
-webkit-transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.south#arrow {
-webkit-transform: rotate(225deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.southWest#arrow {
-webkit-transform: rotate(270deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.west#arrow {
-webkit-transform: rotate(315deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.northWest#arrow {
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
/* Wiggle Animation */
/* safari and chrome */
#-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(4deg);
}
}
/* firefox */
#-moz-keyframes wiggle {
0% {
-moz-transform: rotate(4deg);
}
50% {
-moz-transform: rotate(-4deg);
}
100% {
-moz-transform: rotate(4deg);
}
}
#keyframes wiggle {
0% {
transform: rotate(4deg);
}
50% {
transform: rotate(-4deg);
}
100% {
transform: rotate(4deg);
}
}
<div>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
<title>compass</title>
<line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
<line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
<line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
<line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
<line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
<line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
<line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
<line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
<path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
<path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
<g id="NNW" class="st3">
<path id="nnwPie" class="st4 green" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
</g>
<g id="WNW" class="st3">
<path id="wnwPie" class="st4 dgreen" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
</g>
<g id="WSW">
<path id="wswPie" class="st4" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
</g>
<g id="SSW">
<path id="sswPie" class="st4" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
</g>
<g id="SSE">
<path id="ssePie" class="st4 red" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
</g>
<g id="ESE">
<path id="esePie" class="st4 dred" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
</g>
<g id="ENE">
<path id="enePie" class="st4" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
</g>
<g id="NNE">
<path id="nnePie" class="st4" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
</g>
<polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3
73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3
34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4
76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
</svg>
</div>

You need to chain animations together and use a delay between them so one plays after the other has finished.
You were previously using a transition and then an animation which are two separate things. Also browser prefixes are now pretty redundant for animations, I personally would use the non-prefixed syntax.
Here is one example where the arrow moves to the south and then wiggles, you will need to add in the others:
Example CSS
.wrap:hover #arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouth, wiggleSouth;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
/* Spin south Animation */
#keyframes spinSouth {
0% {
transform: rotate(4deg);
}
100% {
transform: rotate(225deg);
}
}
/* Wiggle Animation */
#keyframes wiggleSouth {
0% {
transform: rotate(225deg);
}
50% {
transform: rotate(220deg);
}
100% {
transform: rotate(225deg);
}
}
Fiddle:
http://jsfiddle.net/5cn9sm99/

I think this may be a shorter solution with the code you already have. You could wrap your arrow in an arrow container like this:
<g id="arrowContainer">
<polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3
73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3
34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4
76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
</g>
Then add this styles to center the pivot point of the container:
#arrowContainer{ transform-origin: 50% 50%; }
Now replace the Rotations to target the arrowContainer and use Javascript or jQuery to add the classes you already created. Here is the full code.
var changeDirection = function changeClass(myClass){
$('#compass').attr("class", myClass);
}
div {
max-width: 300px;
}
.st0 {
fill: none;
stroke: #505050;
stroke-width: 4.11;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #808080;
stroke-width: 2.57;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st2 {
fill: #505050;
}
.st3 {
opacity: 0.5;
}
.st4 {
fill: none;
}
/* Fill Colors */
.green {
fill: rgba(21, 255, 0, 0.5);
}
.dgreen {
fill: rgba(12, 140, 0, 0.5);
}
.red {
fill: rgba(255, 42, 0, 0.5);
}
.dred {
fill: rgba(140, 23, 0, 0.5);
}
/* Arrow */
#arrowContainer{
transform-origin: 50% 50%;
}
#arrow {
transform-origin: 50% 59.7%;
animation-name: wiggle;
animation-duration: 1s;
animation-fill-mode: forward;
-webkit-animation-fill-mode: forward;
-webkit-animation-iteration-count: infinite;
/* Safari 4.0 - 8.0 */
animation-iteration-count: infinite;
}
/* Rotations */
.north #arrowContainer {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.northEast #arrowContainer {
-webkit-transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.east #arrowContainer {
-webkit-transform: rotate(135deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.southEast #arrowContainer {
-webkit-transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.south #arrowContainer {
-webkit-transform: rotate(225deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.southWest #arrowContainer {
-webkit-transform: rotate(270deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.west #arrowContainer {
-webkit-transform: rotate(315deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
.northWest #arrowContainer {
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
/* Wiggle Animation */
/* safari and chrome */
#-webkit-keyframes compass {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(4deg);
}
}
/* firefox */
#-moz-keyframes wiggle {
0% {
-moz-transform: rotate(4deg);
}
50% {
-moz-transform: rotate(-4deg);
}
100% {
-moz-transform: rotate(4deg);
}
}
#keyframes wiggle {
0% {
transform: rotate(4deg);
}
50% {
transform: rotate(-4deg);
}
100% {
transform: rotate(4deg);
}
}
/* Button Styles */
.buttons{
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<button onclick="changeDirection('north')">North</button>
<button onclick="changeDirection('northEast')">NorthEast</button>
<button onclick="changeDirection('east')">East</button>
<button onclick="changeDirection('southEast')">South East</button>
<button onclick="changeDirection('south')">South</button>
<button onclick="changeDirection('southWest')">South West</button>
<button onclick="changeDirection('west')">West</button>
<button onclick="changeDirection('northWest')">North West</button>
</div>
<div id="compass" class="addClassHere">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
<title>compass</title>
<line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
<line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
<line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
<line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
<line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
<line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
<line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
<line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
<path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
<path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
<g id="NNW" class="st3">
<path id="nnwPie" class="st4 green" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
</g>
<g id="WNW" class="st3">
<path id="wnwPie" class="st4 dgreen" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
</g>
<g id="WSW">
<path id="wswPie" class="st4" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
</g>
<g id="SSW">
<path id="sswPie" class="st4" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
</g>
<g id="SSE">
<path id="ssePie" class="st4 red" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
</g>
<g id="ESE">
<path id="esePie" class="st4 dred" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
</g>
<g id="ENE">
<path id="enePie" class="st4" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
</g>
<g id="NNE">
<path id="nnePie" class="st4" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
</g>
<g id="arrowContainer">
<polygon id="arrow" class="st2 west" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3
73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3
34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4
76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
</g>
</svg>
</div>

Resources