SVG CSS Animation is inconsistent - svg

I did some simple css animation on an SVG file, but the animations seems to speed up and slow down. Why don't the animations have a consistent speed?
#cs-cloud .gear {
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
}
#cs-cloud .gear-small {
fill: tan;
animation-name: rotate-clockwise;
animation-duration: 5s;
}
#keyframes rotate-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Here's a fiddle


Try animation-timing-function: linear; in your .gear
#cs-cloud .gear {
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
animation-timing-function: linear;
}
#cs-cloud .gear-small {
fill: tan;
animation-name: rotate-clockwise;
animation-duration: 5s;
}
#cs-cloud .gear-medium {
fill: green;
animation-name: rotate-counter-clockwise;
animation-duration: 10s;
}
#cs-cloud .gear-large {
fill: pink;
animation-name: rotate-clockwise;
animation-duration: 15s;
}
#cs-cloud .cloud {
fill: blue
}
#keyframes rotate-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-counter-clockwise {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<svg version="1.1" id="cs-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
<path class="gear gear-small" d="M189.905,120.377l2.77,4.017c2.154-0.746,4.127-1.77,5.924-2.997l-1.609-5.298l4.286-3.87l4.722,1.312
c1.127-1.912,2.002-3.94,2.61-6.092l-4.654-3.03l0.775-5.717l4.467-2.014c-0.184-1.06-0.429-2.111-0.75-3.173
c-0.323-1.09-0.725-2.137-1.184-3.133l-5.529,0.636l-3.078-4.878l2.109-4.392c-1.699-1.45-3.56-2.663-5.548-3.62l-3.817,4.05
l-5.511-1.777l-1.228-4.721c-2.172-0.021-4.395,0.24-6.58,0.805l-0.306,5.525l-5.387,2.186l-3.978-2.832
c-1.722,1.397-3.238,3.033-4.521,4.816l3.333,4.439l-2.703,5.101l-4.896,0.384c-0.388,2.129-0.534,4.36-0.356,6.588l5.431,1.266
l1.213,5.642l-3.493,3.391c1.092,1.974,2.448,3.737,3.99,5.3l4.966-2.498l4.57,3.55l-0.473,4.843
c2.062,0.766,4.227,1.283,6.45,1.495l2.205-5.102l5.776-0.204v0.002L189.905,120.377z M173.69,103.873
c-1.834-6.056,1.603-12.435,7.689-14.265c6.061-1.819,12.477,1.603,14.311,7.66c1.836,6.038-1.61,12.428-7.671,14.253
c-6.095,1.827-12.497-1.6-14.329-7.652v0.002V103.873z" />
<path class="gear gear-medium" d="M196.347,178.849l3.16,4.568c2.465-0.851,4.716-2.008,6.76-3.403l-1.832-6.06l4.878-4.404l5.382,1.503
c1.281-2.175,2.295-4.494,2.97-6.942l-5.302-3.457l0.89-6.521l5.09-2.287c-0.206-1.216-0.481-2.416-0.854-3.632
c-0.37-1.233-0.827-2.424-1.353-3.562l-6.31,0.736l-3.5-5.57l2.394-5.003c-1.92-1.646-4.034-3.036-6.31-4.127l-4.358,4.61
l-6.286-2.02l-1.394-5.388c-2.48-0.022-5.005,0.286-7.494,0.926l-0.354,6.296l-6.136,2.494l-4.535-3.229
c-1.97,1.597-3.697,3.452-5.159,5.49l3.81,5.05l-3.1,5.82l-5.57,0.435c-0.442,2.443-0.61,4.977-0.404,7.513l6.187,1.45l1.39,6.427
l-3.988,3.873c1.248,2.232,2.792,4.246,4.544,6.03l5.667-2.846l5.207,4.036l-0.532,5.529c2.346,0.88,4.819,1.456,7.352,1.705
l2.514-5.808l6.58-0.229l-0.003-0.004L196.347,178.849z M177.857,160.029c-2.083-6.894,1.826-14.176,8.772-16.25
c6.912-2.085,14.23,1.815,16.314,8.714c2.092,6.904-1.832,14.174-8.747,16.265c-6.94,2.074-14.247-1.826-16.338-8.73h-0.002V160.029
z" />
<path class="gear gear-large" d="M128.26,186.003l5.195,7.554c4.02-1.393,7.77-3.297,11.126-5.597l-3.03-10.019l8.09-7.247l8.858,2.451
c2.133-3.56,3.77-7.396,4.896-11.415l-8.752-5.717l1.485-10.729l8.367-3.788c-0.33-2.002-0.775-3.997-1.382-5.993
c-0.612-2.036-1.37-3.99-2.24-5.887l-10.397,1.229l-5.772-9.192l3.964-8.248c-3.178-2.71-6.674-5.008-10.444-6.801l-7.181,7.628
l-10.36-3.347l-2.287-8.88c-4.095-0.044-8.248,0.44-12.381,1.51l-0.59,10.41l-10.097,4.068l-7.479-5.336
c-3.259,2.659-6.111,5.71-8.525,9.077l6.279,8.357l-5.09,9.567l-9.185,0.708c-0.778,4.042-1.022,8.189-0.677,12.41l10.201,2.376
l2.277,10.6l-6.574,6.408c2.072,3.688,4.594,7.01,7.486,9.935l9.368-4.704l8.584,6.66l-0.899,9.123
c3.875,1.446,7.959,2.413,12.157,2.824l4.133-9.592l10.878-0.407L128.26,186.003z M97.736,155.005
c-3.442-11.38,3.02-23.378,14.455-26.805c11.429-3.44,23.479,3,26.928,14.375c3.445,11.372-3.018,23.377-14.446,26.81
C113.238,172.817,101.186,166.377,97.736,155.005h-0.002H97.736z" />
<path class="cloud" d="M226.957,78.327c0-0.723,0.127-1.455,0.127-2.189c0-39.068-32.087-71.215-70.977-71.215
c-28.018,0-52.135,16.96-63.438,40.712c-4.927-2.483-10.39-3.883-16.285-3.883c-17.985,0-32.87,14.394-35.792,31.592
c-21.384,7.416-36.814,26.858-36.814,50.92c0,30.266,24.361,55.657,54.441,55.657H77.27l-4.522-9.73H58.7
c-24.853,0-45.08-21.202-45.08-46.237c0-19.386,12.271-35.478,30.504-41.804l5.104-1.817l0.91-5.358
C52.323,61.849,63.559,51.1,76.807,51.1c4.194,0,8.332,0.97,12.094,2.917l8.209,4.129l3.94-8.322
c10.091-21.202,31.667-35.363,54.938-35.363c33.603,0,61.312,26.798,61.312,60.58c0,8.086-0.122,12.337-0.122,12.337l9.234,0.056
c22.302,0.311,39.854,18.525,39.854,40.966c0,22.41-18.103,41.428-40.402,41.547l-1.943,0.243h-6.103
c-1.309,2.293-3.506,5.771-6.678,9.73h15.033C253.52,179.923,276,156.289,276,128.692c0.002-27.699-21.513-50.299-49.04-50.365
H226.957z" />
</svg>

Related

Safari won't rotate an SVG path but chrome and firefox does?

I'm running into an extremely odd issue. I'm trying to animate an SVG path rotation based on an image hover. It seems to not add the class with the transform when you hover over the image. When I manually add it in the HTML it does work but I don't get why it won't work with just a hover function. I have added all the prefixes too. I made a codepen with an example SVG and image to hover. Please check this in safari and chrome.
Codepen link
HTML
<div class="wrapper-logo">
<svg class="App-logo" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" />
</svg>
</div>
<svg class="App-pill" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg"> <defs>
<mask id="mask-p">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" fill="white"/>
<path class='pill-1' d="M47.3377 18.8021L18.8226 47.1101C13.7279 52.1678 13.7293 60.3942 18.8258 65.3743C23.9223 70.4298 32.2122 70.4281 37.2309 65.3704L65.746 37.0624C68.2554 34.5713 69.5477 31.2502 69.5471 27.9295C69.5465 24.6087 68.253 21.2882 65.7428 18.7982C60.7223 13.7426 52.4325 13.7444 47.3377 18.8021Z" fill="black"/>
</mask>
</defs>
</svg>
<footer>
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" class="shoes small" alt="browns" onmouseover="rotateBrowns(this)" />
</footer>
CSS
.App-pill {
display: block;
width: 0;
height: 0;
}
.App-logo {
min-width: 50%;
pointer-events: none;
}
/* LETTER */
.LETTER-P {
-webkit-mask: url(#mask-p);
mask: url(#mask-p);
}
.pill-1 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform-origin: 42px 41px;
-ms-transform-origin: 42px 41px;
transform-origin: 42px 41px;
}
.horizontal {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
JS
let shoesarray = document.querySelectorAll('.shoes')
let path1 = document.querySelector('.pill-1')
let path2 = document.querySelector('.pill-1')
let path3 = document.querySelector('.pill-1')
let path4 = document.querySelector('.pill-1')
function rotateBrowns() {
console.log('e')
path1.classList.add('horizontal')
path2.classList.add('horizontal')
path3.classList.add('horizontal')
path4.classList.add('horizontal')
}
function revertBrowns() {
console.log('e')
path1.classList.remove('horizontal')
path2.classList.remove('horizontal')
path3.classList.remove('horizontal')
path4.classList.remove('horizontal')
}

SVG rotation on center axis

I have a SVG graphic is supposed to make a flower, where the petals will fade in and rotate at timed intervals. What is happening is that the petals will not rotate on the center point of the circle in the middle of the flower. The petals are movingto the left when animated instead of rotating and fading in where they originated, behind the circle in the center.
I have tried the following in the code attached to no avail including transform-origin: center but that has not worked. what I am missing?
/* ROTATE ANIMATION */
#-webkit-keyframes rotateIn {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(140deg);}
}
#-moz-keyframes rotateIn {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(140deg);}
}
#keyframes rotateIn {
from {opacity: 0; transform: rotate(0deg);}
to {opacity: 0.5; transform: rotate(140deg);}
}
/* ANIMATE PETALS */
path[id^="petal"]{
opacity: 0;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation:rotateIn ease-in 1;
-moz-animation:rotateIn ease-in 1;
animation:rotateIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}
#petal1 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#petal1 {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#petal2 {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#petal3 {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#petal4 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1504 750">
<title>PETAL_BG-03</title>
<g id="PETALS">
<path id="petal1" d="M770,736.76c-29.27-69.28-25-172.9,18-275.52S901.75,282.87,971.65,255.12c29.27,69.28,25,172.9-18,275.53S839.85,709,770,736.76Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal2" d="M836.94,413.32c103.06-41.93,206.72-45.14,275.7-15.17-28.47,69.61-104.92,139.68-208,181.61S697.94,624.9,629,594.93C657.43,525.32,733.88,455.25,836.94,413.32Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal3" d="M1110.91,599.28c-69.49,28.78-173.07,23.78-275.4-19.91S658,464.3,630.69,394.2c69.49-28.78,173.07-23.78,275.39,19.92S1083.65,529.18,1110.91,599.28Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal4" d="M968.79,738.94c-69.57-28.58-139.51-105.15-181.27-208.28s-44.8-206.79-14.71-275.72c69.57,28.58,139.51,105.15,181.27,208.28S998.87,670,968.79,738.94Z" transform="translate(-154 -131)" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
</g>
<g id="CENTER">
<circle id="centercircle" cx="716.8" cy="365.34" r="108.5" style="fill:#725400;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
</g>
</svg>

Set the transform="translate(-154 -131)" attribute on the petals group, not the individual paths. Otherwise, the rotate transformation will replace the translation.
Set transform-box: fill-box to clarify what transform-origin: center relates to.
/* ROTATE ANIMATION */
#keyframes rotateIn {
from {opacity: 0; transform: rotate(0deg);}
to {opacity: 0.5; transform: rotate(140deg);}
}
/* ANIMATE PETALS */
path[id^="petal"]{
opacity: 0;
transform: rotate(0deg);
transform-origin: center;
transform-box: fill-box;
animation:rotateIn ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.5s;
}
#petal1 {
animation-delay: 0.2s;
}
#petal2 {
animation-delay: 0.4s;
}
#petal3 {
animation-delay: 0.6s;
}
#petal4 {
animation-delay: 0.8s;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1504 750">
<title>PETAL_BG-03</title>
<g id="PETALS" transform="translate(-154 -131)">
<path id="petal1" d="M770,736.76c-29.27-69.28-25-172.9,18-275.52S901.75,282.87,971.65,255.12c29.27,69.28,25,172.9-18,275.53S839.85,709,770,736.76Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal2" d="M836.94,413.32c103.06-41.93,206.72-45.14,275.7-15.17-28.47,69.61-104.92,139.68-208,181.61S697.94,624.9,629,594.93C657.43,525.32,733.88,455.25,836.94,413.32Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal3" d="M1110.91,599.28c-69.49,28.78-173.07,23.78-275.4-19.91S658,464.3,630.69,394.2c69.49-28.78,173.07-23.78,275.39,19.92S1083.65,529.18,1110.91,599.28Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
<path id="petal4" d="M968.79,738.94c-69.57-28.58-139.51-105.15-181.27-208.28s-44.8-206.79-14.71-275.72c69.57,28.58,139.51,105.15,181.27,208.28S998.87,670,968.79,738.94Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0"
/>
</g>
<g id="CENTER">
<circle id="centercircle" cx="716.8" cy="365.34" r="108.5" style="fill:#725400;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
</g>
</svg>

SVG Animated Graph Arrow

This is my first time using SVG and I want to know if it is possible to create an animated line graph with an arrow. I have found multiple examples of animated line graphs without arrows, non-animated line graphs with arrows, and animated straight lines with arrows, but not exactly what I am looking for. I have attached some codepen examples I've been playing around with below. Does anyone know if this is possible/have a solution? It would be greatly appreciated!
Animated line missing arrow (needs arrow):
http://codepen.io/alexandraleigh/pen/jVaObd
# HTML
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
</g>
</svg>
</div>
# CSS(Less)
#import "lesshat";
#darkgrey: #303030;
*{
box-sizing: border-box;
}
body{
background: #darkgrey;
}
.graph__wrapper{
width: 400px;
margin: 30px auto;
position: relative;
svg{
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description{
font-family: "Roboto";
color:lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
Animated straight line with arrow (needs to stop at multiple points on path):
http://codepen.io/alexandraleigh/pen/yVPYrY
I tried adding the path descriptions from #1 to #2 and it has the desired final graph, just no animations:
http://codepen.io/alexandraleigh/pen/pNdgWR
I also tried adding the arrow marker from #2 to #1, but the arrow doesn't animate:
http://codepen.io/alexandraleigh/pen/aBVdVY
I'm also open to using a plugin such as http://snapsvg.io/, but haven't seen any working examples that help my situation.

you can do this with offset-motion(old syntax: motion-path).
Be aware that this is a heighly experimental feature. it currently only works in Chrome. More to the point i use the "old" syntax here as that is what currently works in chrome, but it will soon switch to the new systax...
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes pm {
from {
motion-offset: 0%;
}
to {
motion-offset: 100%
}
}
#arrow {
animation: pm 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844');
motion-rotation: auto;
motion-anchor: center;
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" />
</g>
</svg>
</div>
you can also do this with animateMotion, but svg animations are soon to be depricted. You will have to rewrite your code in any way sooner or later :-(
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s linear forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white">
<animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze">
<mpath xlink:href="#Path-1" />
</animateMotion>
</polyline>
</g>
</svg>
</div>

Animate SVG Hamburger menu icon on click and keep it in :active state

I have a SVG hamburger menu icon that is animated when clicked. The goal is to transform it in to a "close" button when you activate the side-push menu. I need some help achieving that:
http://jsfiddle.net/a6ysa9zk/
HTML:
<div class="toggle-menu menu-right push-body">
<svg class="inline-svg" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 32 22.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g class="svg-menu-toggle" sketch:type="MSLayerGroup">
<circle class="round" fill="#3B3B41" sketch:type="MSShapeGroup" cx="21" cy="21" r="21"></circle>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="26" width="18" height="4"></rect>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="19" width="18" height="4"></rect>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="12" width="18" height="4"></rect>
</g>
</svg>
</div>
CSS:
.svg-menu-toggle {
fill: #fff;
pointer-events: all;
cursor: pointer;
}
.svg-menu-toggle .round {
transition: fill .4s ease-in-out;
}
.svg-menu-toggle .bar {
-webkit-transform: rotate(0) translateY(0) translateX(0);
transform: rotate(0) translateY(0) translateX(0);
opacity: 1;
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
}
.svg-menu-toggle .bar:nth-of-type(1) {
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
}
.svg-menu-toggle .bar:nth-of-type(3) {
-webkit-transform-origin: 20px 20px;
transform-origin: 20px 20px;
}
.svg-menu-toggle:active .bar:nth-of-type(1) {
-webkit-transform: rotate(-45deg) translateY(-10px) translateX(-8px);
transform: rotate(-45deg) translateY(-10px) translateX(-8px);
fill: #3B3B41;
}
.svg-menu-toggle:active .bar:nth-of-type(2) {
opacity: 0;
}
.svg-menu-toggle:active .bar:nth-of-type(3) {
-webkit-transform: rotate(45deg) translateY(6px) translateX(0px);
transform: rotate(45deg) translateY(6px) translateX(0px);
fill: #3B3B41;
}
.svg-menu-toggle:active .round {
fill: #F2F2F2;
}
Javascript for menu toggle:
jQuery(document).ready(function ($) {
$('.toggle-menu').jPushMenu();
});

Instead of using the :active pseudo-element, its easier to add a class to the group (.svg-menu-toggle).
Unfortunately it isn't possible to use toggleClass from jQuery.
// CSS
.svg-menu-toggle:active become .svg-menu-toggle.active
// JS
$('.toggle-menu').on('click', function(e) {
var $toggle = $(this).find('.svg-menu-toggle');
// toggleClass with addClass & removeClass
});

SVG not working in Chrome

This works in Firefox but not Chrome. Basically the animation works correctly in Firefox with the lightbulb glowing and the leaf growing but for some reason cannot get it to work in Chrome. Thanks for the help here.
jsfiddle here, http://jsfiddle.net/EfLtD/1/
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g id="light-bulb-6-icon_1_">
<path fill="#FFFFFF" d="M-314.3,152.1c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H-314.3z M-326.6,137.7c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H-326.6z M-327.4,123.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L-327.4,123.9L-327.4,123.9z M-298,109.7c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1c-25.5,0-37,18.2-37,35.1c0,12.1,5.6,21.4,11.5,31.3
c5.9,9.9,12,20.1,12.6,33.7h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2
c8.4-7.2,19.7-11.1,31.9-11.1c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5
c-5.6,9.4-10.8,18.2-11.2,28.5L-298,109.7L-298,109.7z M-312.8,109.6c-3.3-14.5-1.4-40.1,6.7-54.6l2.4-4.3l-3.9,3.1
c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7c-1.9,5.3-1.3,10.1-0.7,14.7
c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8L-312.8,109.6L-312.8,109.6z"/>
<path fill="#225650" d="M-311,1.4c11.9,0,23,3.9,31.2,10.9c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36
c-5.5,9.2-10.6,17.9-11.3,28h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1
c-6.9-5.8-16.2-9-26.1-9c-9.9,0-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1
h-7.1c-0.6-10.1-5.8-18.8-11.3-28c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5C-334,5.2-322.9,1.4-311,1.4L-311,1.4
M-295.4,35.5c-1.2,1.6-2.2,3.4-2.9,5.4c-1.9,5.5-1.3,10.4-0.8,15.2c0.5,4.5,1.1,8.7-0.7,13.1c-1.8,4.5-5.6,7.3-10.4,7.8l-1.6,0.2
l-0.2,1.6c-1,9.4,0.2,21.7,2.7,29.9h-2.7c-3-14.4-1.1-39.1,6.8-53.1l4.9-8.7l-7.8,6.1c-5.1,4-9.6,13.2-11.6,21
c-4.1-3.7-5.5-9.6-3.7-16.2c1.6-5.9,5.5-11.4,11-15.4C-307.7,38.6-301.8,36.3-295.4,35.5 M-294.7,118.7c0.6,0,1.2,0.2,1.6,0.7
c0.2,0.3,0.5,0.7,0.5,1.4l0,0v0c0,1.1-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1c0-1.1,1-2.1,2.1-2.1L-294.7,118.7 M-295.4,132.5
c1.2,0,2.1,0.9,2.1,2.1c0,1.1-1,2.1-2.1,2.1h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1H-295.4 M-300.9,146.1
c-0.2,0.2-0.3,0.3-0.5,0.5c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3H-300.9 M-311-0.6
c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66c0-22.8,18-34.1,36-34.1S-275,22-275,44.7
c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C-263.8,14.5-287.4-0.6-311-0.6L-311-0.6z M-289.6,33.1
c-33.2,0-46.5,33.8-28.9,44.2c1.5-8.4,6.5-18.9,11.5-22.8c-8.3,14.8-10.3,41.2-6.6,56.1h7.1c-3.1-8-4.5-21.8-3.5-31.7
c5-0.5,9.8-3.4,12.1-9c3.9-9.7-2.1-18.1,1.5-28.4C-295.1,37.7-292.7,34.9-289.6,33.1L-289.6,33.1z M-294.7,116.7h-32.7
c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1C-290.5,118.5-292.4,116.7-294.7,116.7L-294.7,116.7z
M-295.4,130.5h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C-291.3,132.3-293.1,130.5-295.4,130.5L-295.4,130.5z M-295.7,144.1h-30.7c8.1,7.5,8.9,9,12.1,9h6.2
C-304.9,153.1-304.2,151.7-295.7,144.1L-295.7,144.1z"/>
</g>
<g>
<path fill="#F9E46E" class="yellow" d="M89.5,93.2c0,24.3,23.5,38,24.1,66h24c0-27.3,24-41.7,24-66C161.6,47.7,89.5,47.7,89.5,93.2z"/>
</g>
<g id="light-bulb-6-icon_37_">
<path fill="#FFFFFF" d="M122.2,200.9c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H122.2z M109.9,186.5c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H109.9z M109.1,172.7c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L109.1,172.7L109.1,172.7z M138.6,158.5c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1S88.4,76.6,88.4,93.5c0,12.1,5.6,21.4,11.5,31.3c5.9,9.9,12,20.1,12.6,33.7
h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2c8.4-7.2,19.7-11.1,31.9-11.1
c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5c-5.6,9.4-10.8,18.2-11.2,28.5L138.6,158.5
L138.6,158.5z"/>
<path fill="#225650" d="M122.3,201.9h6.2c3.2,0,3.9-1.4,12.4-9h-30.7C118.3,200.4,119,201.9,122.3,201.9z M135.2,195.3
c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3h20.5C135.5,195,135.3,195.2,135.2,195.3z"/>
<path fill="#225650"d="M141.1,179.3h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C145.2,181.1,143.4,179.3,141.1,179.3z M141.1,185.5h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1h31.2c1.2,0,2.1,0.9,2.1,2.1
C143.2,184.5,142.3,185.5,141.1,185.5z"/>
<path fill="#225650" d="M125.5,48.1c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66
c0-22.8,18-34.1,36.1-34.1s36,11.4,36,34.1c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C172.8,63.2,149.1,48.1,125.5,48.1z
M146.6,157.5h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1c-6.9-5.8-16.2-9-26.1-9
s-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1h-7.1c-0.6-10.1-5.8-18.8-11.3-28
c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5c8.2-7,19.3-10.9,31.2-10.9c11.9,0,23,3.9,31.2,10.9
c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36C152.4,138.6,147.2,147.3,146.6,157.5z"/>
<path fill="#225650" d="M141.8,165.5h-32.7c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1
C146,167.3,144.1,165.5,141.8,165.5z M143.9,169.5L143.9,169.5c0,1.2-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1
c0-1.1,1-2.1,2.1-2.1h32.7v0c0.6,0,1.2,0.2,1.6,0.7C143.7,168.4,144,168.8,143.9,169.5L143.9,169.5z"/>
</g>
<path fill="#FFFFFF" class="leaf" stroke="#225650" stroke-width="2" stroke-miterlimit="10" d="M121.8,158.6c-3.3-14.5-1.4-40.1,6.7-54.6
l2.4-4.3l-3.9,3.1c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7
c-1.9,5.3-1.3,10.1-0.7,14.7c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8
L121.8,158.6L121.8,158.6z"/>
</svg>
/* CSS */
/* Globe */
#yellow-globe {width: 300px; height: 300px; margin: 0 auto; text-align: center;}
#keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
.yellow {
fill: yellow;
animation-name: yellow;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.leaf {
stroke-dasharray: 242;
stroke-dashoffset: 242;
animation: dash 4s linear alternate;
animation-iteration-count: 1;
}
#keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}

You need to include the -webkit- prefix on animations (and transitions) for webkit browsers (like Chrome). Working demo
You may also want to include the -ms- and -moz- prefixes so that you can reach older versions of FireFox and IE as well

Resources