CSS3 Transform cutting off shape - css

I have a SVG rect that I am trying to animate to move vertically infinitely so that it looks like it's floating.
When the rect goes downwards, the bottom looks cut off and becomes thinner, and I can't seem to figure out how to make it so that the full SVG shape is still present while it moves.
Here is my JSFiddle
HTML:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 828 828" style="enable-background:new 0 0 828 828;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:50;stroke-miterlimit:10;}
</style>
<rect id="box" x="26.9" y="26.1" class="st0" width="777.4" height="777.4"/>
</svg>
</div>
CSS:
.wrapper {
width:50%;
display:block;
margin-left:auto;
margin-right:auto;
margin:0 auto;
padding-top:5%;
}
#box {
transform-origin:center;
-webkit-animation-name: box;
-webkit-animation-duration: 15s;
-webkit-transform-origin:center;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction:alternate;
animation-direction:alternate;
}
#-webkit-keyframes box {
0% { -webkit-transform: translate(0px, 20px); }
10% { -webkit-transform: translate(0px, -5px); }
20% { -webkit-transform: translate(0px, 20px); }
30% { -webkit-transform: translate(0px, -5px); }
40% { -webkit-transform: translate(0px, 20px); }
50% { -webkit-transform: translate(0px, -5px); }
60% { -webkit-transform: translate(0px, 20px); }
70% { -webkit-transform: translate(0px, -5px); }
80% { -webkit-transform: translate(0px, 20px); }
90% { -webkit-transform: translate(0px, -5px); }
100% { -webkit-transform: translate(0px, 20px); }
}
Thank you - I really appreciate it!


you should transform the div that holds the svg:
<div id='box'> <!-- transform this guy -->
<svg>
</svg>
</div>
https://jsfiddle.net/foreyez/kxb52cjz/

Related

Have element appear in same location as another during CSS animation

I would like to have a balloon pop and when it does I comic style "POP" SVG will appear indicating the pop. I am struggling to figure out a way to position the pop svg so it is at the same location as the balloon popping. You can see it happen in my code at around 18-19 seconds. The turtle on the balloon comes in for the second time and then starts to fade out. You can see the POP happen on the top-left of the screen.
Any ideas on how I can get them to line up? Should I use JS?
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.flying img {
max-width: 150px;
position: absolute;
top: 20px;
transform: translateX(-30vw);
animation: moveBird 2s linear 16.9s 1 forwards;
}
#-webkit-keyframes moveBird {
0% {
transform: translateX(-30vw) rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: translateX(45vw) rotate(3deg);
}
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 2s linear .2s 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
.turtle {
position: absolute;
top: 50px;
transform: translateX(-50vw);
opacity: 1;
animation: moveTurtle 5s linear 1s 1 none,
moveTurtleStop 11s linear 6s 1 forwards,
moveTurtleRotate 5s linear 17s infinite forwards,
hideOpacity 1s linear 19s 1 forwards;
width: 250px;
}
.pop {
position: absolute;
opacity: 0;
top: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
#-webkit-keyframes pow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes hideOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes moveTurtle {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleRotate {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(50vw) rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleStop {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(75vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#-webkit-keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<div class="BalloonContainer">
<div class="flying">
<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
</div>
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_1</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="firstBalloon swingimage">
<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_2</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="secondBalloon swingimage">
<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_3</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="thirdBalloon swingimage">
<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_4</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="theTurtle">
<div class="turtle swingimage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.826 171.637"><defs><style>.cls-1{fill:#171618;}</style></defs><title>turtleandBalloon</title><g id="balloonTotalMain"><polygon id="stringMain" class="cls-1" points="38.5 121.946 40.57 53.946 41.734 53.946 42.5 121.946 38.5 121.946"/><path id="bPiece_8" class="cls-1" d="M37.608,52.314a3.2,3.2,0,0,1-2.537-1.509c-.841-1.122-1.6-2.316-2.265-3.37a24.353,24.353,0,0,0-1.788-2.6,6.229,6.229,0,0,1-1.745,2.484l-.7.654-.648-.71a45.517,45.517,0,0,1-8.488-12.955l-.348-.83.809-.394a23.644,23.644,0,0,1,9.887-2.607,12.738,12.738,0,0,1,4.482.772c4,1.5,5.27,2.77,6.29,3.79.873.873,1.45,1.45,4.006,1.876.5.083.929.151,1.3.21,1.876.3,2.508.4,2.745,1.171.221.72-.294,1.2-.839,1.713a13.461,13.461,0,0,0-2.547,3.1c-.435.725-.871,1.5-1.306,2.266C41.9,48.942,39.989,52.314,37.608,52.314Z" transform="translate(0)"/><path id="bPiece_7" class="cls-1" d="M38.771,58.327l-.279-.279c-.919-.919-.351-2.028.211-2.8-.253-.061-.549-.137-.9-.233l.09-1.855a5.7,5.7,0,0,0,3.762-2.436c-.478-.6-.793-2.114,4.926-7.832l1.16-1.16,2.668,9.782-.553.384A32.485,32.485,0,0,1,44.6,54.89c.84,1.045,1.077,1.831.791,2.523a1.563,1.563,0,0,1-1.464.914Z" transform="translate(0)"/><path id="bPiece_6" class="cls-1" d="M51.541,49.085c-.379-.864-.777-1.619-1.128-2.286-.8-1.521-1.379-2.619-1.035-3.688a2.327,2.327,0,0,1,1.264-1.347c.459-.229.4-.843-.021-2.573a13.811,13.811,0,0,1-.506-3.24A2.445,2.445,0,0,1,52.726,33.2c1.515,0,3.662.811,6.313,1.871a11.3,11.3,0,0,0,2.344.675l1.216.2-.5,1.127a35.34,35.34,0,0,1-9.059,12.35l-.976.855Z" transform="translate(0)"/><path id="bPiece_5" class="cls-1" d="M60.97,34.233c-2.069,0-6.1-2.761-7.838-5.371-.727-1.091-1.157-1.8-.853-2.507a1.522,1.522,0,0,1,1.3-.8,2.591,2.591,0,0,0,1.58-.749c.641-.641.641-.641-.076-1.757a21.183,21.183,0,0,1-2.039-3.882,3.453,3.453,0,0,1,.01-3.3,3.4,3.4,0,0,1,3.023-1.233,11.437,11.437,0,0,1,2.373.288l3.905-3.255.546,1.049a23.4,23.4,0,0,1,1.962,15.318,41.07,41.07,0,0,1-1.216,4.934l-.186.593-.617.068a1.511,1.511,0,0,0-.634.153,1.684,1.684,0,0,1-1.236.458Z" transform="translate(0)"/><path id="bPiece_4" class="cls-1" d="M46.6,35.438c-1.948,0-4.19-1.226-5.673-2.037-.295-.161-.553-.3-.763-.407-1.261-.631-1.955-2.074-1.955-4.065a13.4,13.4,0,0,1,1.529-5.782c.814-1.629-.922-3.439-3.464-5.816-1.451-1.357-2.822-2.639-3.253-3.931a2.483,2.483,0,0,1,.348-2.318c1.137-1.577,4-2.149,5.644-2.149a3.255,3.255,0,0,1,2.188.577,1.147,1.147,0,0,0,.256.023,9.438,9.438,0,0,0,6.85-4.478,4.728,4.728,0,0,1,3.6-2.272l.315-.061.288.141a24.215,24.215,0,0,1,6.837,4.955l.9.944-1.176.571c-1.184.575-1.776,2.35-2.348,4.066-1.1,3.3-1.5,3.456-6.43,4.442-1.9.379-1.529,3.177-.75,7.4.463,2.51.941,5.106.545,7.087A3.418,3.418,0,0,1,46.6,35.438Z" transform="translate(0)"/><path id="bPiece_3" class="cls-1" d="M34.744,6.628a41.641,41.641,0,0,1-6.839-.642l-2.144-.361,1.72-1.33a31.067,31.067,0,0,1,4.592-3l.061-.031.065-.021A25.071,25.071,0,0,1,40.14,0a28.537,28.537,0,0,1,9.942,1.811L53.227,3l-3.3.642c-1.9.37-3.83.872-5.7,1.358a61.208,61.208,0,0,1-6.356,1.429A22.338,22.338,0,0,1,34.744,6.628Z" transform="translate(0)"/><path id="bPiece_2" class="cls-1" d="M38.856,35.344c-.626,0-1.353-.411-2.681-1.518s-3.576-1.674-6.669-1.674A44.457,44.457,0,0,0,19.948,33.4l-.815.184-.288-.784a33.419,33.419,0,0,1-1.565-5.73C15.311,15.914,22.554,8.23,27.046,4.643l.438-.349L28,4.507A4.327,4.327,0,0,1,29.954,5.9l.226.33L30.1,6.62c-.044.219-1.12,5.364-5.463,6.45-.446.111-.889.623-1.283,1.478-1.8,3.91-1.525,12.217-.953,13.36a1.188,1.188,0,0,0,.594.1c2.022,0,5.736-1.887,6.272-2.958.376-.751.376-3.224.376-5.406,0-2.592,0-5.273.524-6.848.128-.384.518-1.552,1.537-1.552,1.628,0,2.087,3.241,2.194,4.346.242.154.708.39,1.1.587,1.764.893,4.431,2.242,5.082,4.5a4.177,4.177,0,0,1-.573,3.388c-1.186,1.976-.366,5.247.176,7.411.441,1.757.683,2.725.156,3.4A1.219,1.219,0,0,1,38.856,35.344Z" transform="translate(0)"/><path id="bPiece_1" class="cls-1" d="M37.808,55.018c-.941-.262-1.8-.548-1.8-.548l-.128-.043-.111-.076a50.878,50.878,0,0,1-7.848-7.087l-.636-.7.691-.643a4.436,4.436,0,0,0,1.24-1.706c.42-1.258,1.124-1.522,1.642-1.522,1.2,0,2.089,1.4,3.558,3.719.648,1.024,1.382,2.185,2.178,3.246.256.341.64.748,1.014.748,1.27,0,3.222-3.454,4.647-5.976.444-.784.887-1.569,1.331-2.308a14.855,14.855,0,0,1,2.4-3.051c-.137-.023-1.237-.2-1.74-.281-3.158-.526-4.03-1.4-5.04-2.408-.889-.889-2-2-5.612-3.352a10.807,10.807,0,0,0-3.813-.651A21.766,21.766,0,0,0,20.728,34.8l-.905.442-.39-.929c-.207-.494-.4-1-.588-1.508l-.376-1.019,1.059-.239a46.388,46.388,0,0,1,9.978-1.295c3.551,0,6.2.711,7.888,2.115.267.222.49.4.676.539-.072-.314-.158-.655-.235-.965-.619-2.469-1.555-6.2.038-8.855a2.327,2.327,0,0,0,.376-1.879c-.421-1.458-2.642-2.582-4.112-3.325-1.318-.667-2.113-1.069-2.113-1.923a8.684,8.684,0,0,0-.262-1.607,40.322,40.322,0,0,0-.214,5.3c0,2.739,0,5.1-.577,6.258C30,27.839,25.462,29.914,23,29.914a2.31,2.31,0,0,1-2.3-1.155c-.927-1.855-1-10.818.927-15.006a4.087,4.087,0,0,1,2.55-2.53c2.516-.63,3.591-3.374,3.931-4.5a3.714,3.714,0,0,0-.827-.458l-1.5-.615,1.7-1.357.331-.257.412.07a39.9,39.9,0,0,0,6.522.614A20.471,20.471,0,0,0,37.6,4.539,60.105,60.105,0,0,0,43.75,3.152c1.9-.494,3.861-1,5.814-1.384l.265-.051.252.094c.829.311,1.648.666,2.434,1.052l2.538,1.248-2.776.541a3.006,3.006,0,0,0-2.262,1.255,11.139,11.139,0,0,1-8.554,5.53,2.1,2.1,0,0,1-1.541-.522l0,0a4.733,4.733,0,0,0-.9-.08c-1.507,0-3.513.546-4.1,1.359a.6.6,0,0,0-.086.6c.278.835,1.533,2.008,2.746,3.143,2.4,2.242,5.381,5.032,3.867,8.058-1.769,3.539-1.644,6.683-.426,7.292.228.114.507.267.825.441,1.234.674,3.3,1.8,4.76,1.8.68,0,1.348-.191,1.626-1.579.324-1.622-.121-4.035-.551-6.368-.764-4.142-1.629-8.838,2.249-9.613,4.22-.844,4.22-.844,5-3.177.7-2.091,1.417-4.252,3.323-5.177l.624-.3.48.5A21.346,21.346,0,0,1,62.9,12.709l.354.681-4.342,3.618-.485-.137a9.989,9.989,0,0,0-2.351-.34c-.737,0-1.278.148-1.446.4s-.106.812.181,1.53a19.3,19.3,0,0,0,1.872,3.558c.865,1.345,1.548,2.407-.178,4.134a4.325,4.325,0,0,1-2.1,1.178c.082.13.184.288.31.477,1.525,2.287,5.061,4.521,6.252,4.524a3.07,3.07,0,0,1,1.661-.6l1.451-.162-.437,1.393A38.8,38.8,0,0,1,62.1,37.067l-.3.673-.726-.119a13.148,13.148,0,0,1-2.744-.786C56.046,35.921,53.9,35.1,52.726,35.1c-.47,0-.706,0-.706.851a12.127,12.127,0,0,0,.452,2.792c.428,1.772.913,3.779-.979,4.725-.215.108-.291.193-.3.227a6.142,6.142,0,0,0,.907,2.217c.366.7.78,1.482,1.187,2.407l.281.638-.525.461a36.019,36.019,0,0,1-3.18,2.483l-1.107.767-1.973-7.233a20.392,20.392,0,0,0-3.406,4.381,1.666,1.666,0,0,1,.125,1.4c-.465,1.477-2.694,3.363-5.271,3.818l-.213.038ZM27.559,25a21.326,21.326,0,0,1,2.882-14.059c-3.465,2.727-7.247,7.3-6.617,14.059Z" transform="translate(0)"/></g><g id="turtleMain"><path id="turtleBody" class="cls-1" d="M103.914,147.832a37.959,37.959,0,0,0-6.666-6.665s-1.9-2.857-6.665-1.905-9.522,2.857-7.617.953,1.9-2.857-.953-2.857c-.952,0-17.139-15.235-27.613-17.139s-11.426-2.857-19.043-2.857c0,0-17.14-.952-31.422,19.044,0,0-4.761.952-3.809,3.809s7.617,7.617,5.713,10.474-6.665,8.569-3.809,11.426S16.313,156.4,16.313,156.4s17.139,11.426,39.039.952c0,0,1.905,0,1.905,3.809s-.952,10.474,1.9,10.474,9.522-11.427,9.522-11.427,3.809-3.808.952-6.665c0,0-1.9-1.9-.952-2.856s6.665-5.713,10.474-.953,3.809,6.666,9.522,6.666,13.33-2.857,13.33-2.857S106.77,151.641,103.914,147.832Zm-99.027-8.57s24.756,34.279,72.366,0C77.253,139.262,32.5,180.206,4.887,139.262Zm88.077,11.427a4.285,4.285,0,1,1,4.284-4.285A4.285,4.285,0,0,1,92.964,150.689Z" transform="translate(0)"/><circle id="eyeballMain" class="cls-1" cx="94.392" cy="145.928" r="0.952"/></g></svg>
</div>
<!-- POW -->
<div class="pop">
<svg id="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.251 373.053"><defs><style>.cls-1{fill:#ed2f2f;}</style></defs><title>pop</title><g id="letterHole"><path class="cls-1" d="M220.443,178.854c0-.954,0-1.871.024-2.806a12.231,12.231,0,0,1,3.405-.7c.088,0,.165,0,.232.007a9.469,9.469,0,0,1-2.129,2.623,15.561,15.561,0,0,1-1.532,1.409Z"/><path d="M223.872,173.387a17.568,17.568,0,0,0-5.312,1.232c-.078,1.463-.078,2.849-.078,4.235v4.157a19,19,0,0,0,4.851-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.77-1.617-2.31-1.617Z"/></g><g id="letterHole2"><path class="cls-1" d="M185.6,202.994a5.2,5.2,0,0,1-4.975-2.978,13.791,13.791,0,0,1-1.3-7.053,29.148,29.148,0,0,1,2.318-9.742c1.072-2.529,2.863-5.563,5.27-5.563,1.763,0,3.206,1.741,4.29,5.174a27.584,27.584,0,0,1,1.22,9.251,16.944,16.944,0,0,1-1.916,7.463C188.859,202.6,187.021,202.994,185.6,202.994Z"/><path d="M186.912,179.619c.729,0,1.7,1.529,2.406,3.757a25.656,25.656,0,0,1,1.145,8.608,15.057,15.057,0,0,1-1.691,6.646c-1.194,2.217-2.262,2.4-3.168,2.4a3.247,3.247,0,0,1-3.233-1.92,11.947,11.947,0,0,1-1.087-6.067A27.1,27.1,0,0,1,183.441,184c1.145-2.7,2.476-4.384,3.471-4.384m0-3.922c-2.771,0-5.158,2.233-7.083,6.775a30.95,30.95,0,0,0-2.464,10.395,15.692,15.692,0,0,0,1.54,8.084,7.122,7.122,0,0,0,6.7,4c2.848,0,5-1.463,6.622-4.466a18.974,18.974,0,0,0,2.155-8.315,29.434,29.434,0,0,0-1.309-9.933c-1.385-4.388-3.465-6.544-6.16-6.544Z"/></g><g id="letterHole3"><path class="cls-1" d="M147.681,178.854c0-.954,0-1.871.023-2.806a12.237,12.237,0,0,1,3.405-.7c.088,0,.165,0,.233.007a9.5,9.5,0,0,1-2.13,2.623,15.419,15.419,0,0,1-1.531,1.408Z"/><path d="M151.109,173.387a17.586,17.586,0,0,0-5.313,1.232c-.076,1.463-.076,2.849-.076,4.235v4.157a19.012,19.012,0,0,0,4.85-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.771-1.617-2.31-1.617Z"/></g><g id="full"><path class="cls-1" d="M196.125,281.119l-58.461,85.333,2.861-103.4L43.071,297.727l63.092-81.97L6.94,186.526l99.223-29.23L43.071,75.326,140.525,110,137.664,6.6l58.461,85.333L254.587,6.6,251.726,110l97.453-34.674-63.09,81.97,99.222,29.23-99.223,29.231,63.091,81.97-97.453-34.674,2.861,103.4Zm52.493-78.044a13.514,13.514,0,0,0-1.477.085,12.807,12.807,0,0,0-6.6,3,8.95,8.95,0,0,0-3.224,6.8,6.883,6.883,0,0,0,3.615,6.327,9.169,9.169,0,0,0,4.949,1.369,12.26,12.26,0,0,0,1.769-.134,13.325,13.325,0,0,0,6.49-2.881,8.808,8.808,0,0,0,3.344-6.837,7.092,7.092,0,0,0-3.636-6.295A9.641,9.641,0,0,0,248.618,203.075Zm-84.57-24.557a47.259,47.259,0,0,0-1.193,8.718,43.558,43.558,0,0,0,3.716,20.148c3.635,8.116,9.081,12.236,16.184,12.236,6.906,0,12.664-4.043,17.112-12.016a46.244,46.244,0,0,0,5.712-20.171,43.941,43.941,0,0,0-3.711-20.161c-3.639-8.126-9.087-12.247-16.187-12.247-6.957,0-12.741,4.043-17.19,12.017a44.035,44.035,0,0,0-2.729,5.858,19.435,19.435,0,0,0,.243-3.055,21.653,21.653,0,0,0-.418-3.981c-.781-3.97-3.763-8.683-13.554-8.683-5.192,0-11.538,1.225-18.862,3.641l-1.437.474.093,1.51c.441,7.1.979,16.388,1.229,25.189l.54,17.867c.147,5.4.3,8.845.387,10.156l.162,2.449L149.212,214l-.154-1.608c-.511-5.328-.873-10.534-1.1-15.882C156.073,190.332,161.406,184.383,164.048,178.518ZM224.8,157.181c-5.192,0-11.537,1.225-18.862,3.641l-1.437.474.093,1.51c.44,7.1.977,16.382,1.229,25.189l.54,17.867c.148,5.419.3,8.86.388,10.158l.163,2.446L221.975,214l-.155-1.608c-.511-5.333-.873-10.539-1.1-15.882,12.145-9.237,18.053-17.967,18.053-26.664a21.747,21.747,0,0,0-.418-3.98C237.568,161.894,234.586,157.181,224.8,157.181Zm16.222,41.393,14.535.738.15-1.9a106.2,106.2,0,0,1,2.945-18.217c.858-3.427,2.581-9.034,5.431-17.666l.722-2.185-20.628-3.324Z"/><path d="M252.442,13.2l-2.6,93.882-.158,5.724,5.394-1.919,88.485-31.482L286.28,153.831l-3.492,4.537,5.492,1.618,90.09,26.54-90.09,26.541-5.492,1.618,3.492,4.537,57.285,74.425L255.08,262.165l-5.394-1.919.158,5.723,2.6,93.883-53.081-77.48-3.236-4.723-3.235,4.723-53.081,77.48,2.6-93.883.158-5.723-5.394,1.919L48.686,293.647l57.285-74.425,3.492-4.537-5.492-1.618-90.09-26.541,90.09-26.54,5.492-1.618-3.492-4.537L48.686,79.406l88.485,31.482,5.394,1.919-.158-5.724-2.6-93.882,53.081,77.48,3.235,4.723,3.236-4.723L252.442,13.2M167.407,165c-.906-3.86-4.131-9.779-15.374-9.779-5.4,0-11.954,1.258-19.477,3.74l-2.873.947.187,3.02c.439,7.089.976,16.352,1.226,25.131l.539,17.852c.149,5.432.3,8.909.391,10.237l.323,4.9,4.706-1.4,11.166-3.31,3.1-.919-.309-3.216c-.475-4.955-.821-9.805-1.052-14.763A67.918,67.918,0,0,0,160.9,187.085l0,.064a45.468,45.468,0,0,0,3.881,21.027c4.962,11.08,12.515,13.406,17.978,13.406,7.671,0,14-4.382,18.824-13.021a46.325,46.325,0,0,0,2.725-5.787l.094,3.136c.149,5.452.3,8.924.392,10.24l.327,4.894,4.7-1.4,11.164-3.31,3.1-.919-.308-3.216c-.476-4.96-.822-9.809-1.052-14.762,12.113-9.409,18.009-18.451,18.009-27.6a23.746,23.746,0,0,0-.459-4.377c-.753-3.827-3.766-10.248-15.475-10.248-5.4,0-11.953,1.258-19.477,3.739l-2.873.948.187,3.02q.049.8.1,1.633c-4.942-9.442-11.92-11.5-17.052-11.5-7.392,0-13.535,4.014-18.274,11.935m89.949,36.368.3-3.8a104.3,104.3,0,0,1,2.9-17.914c.841-3.361,2.553-8.924,5.387-17.509l1.442-4.37-4.543-.732L246.6,154.423l-4.22-.68-.316,4.263-2.849,38.421-.3,4,4.01.2,10.626.539,3.807.194m-17.466,19.59a11.316,11.316,0,0,0,5.986,1.664,14.133,14.133,0,0,0,2.058-.157,15.243,15.243,0,0,0,7.435-3.3l.053-.043.051-.045a10.782,10.782,0,0,0,3.968-8.273,9.064,9.064,0,0,0-4.551-7.953,11.709,11.709,0,0,0-6.272-1.74,15.5,15.5,0,0,0-1.695.1l-.07.008-.07.01a14.694,14.694,0,0,0-7.524,3.445l-.042.036-.041.037a10.943,10.943,0,0,0-3.826,8.216,8.856,8.856,0,0,0,4.54,7.994M256.732,0,196.125,88.464,135.519,0l2.967,107.192L37.457,71.247l65.405,84.976L0,186.526l102.862,30.3-65.4,84.977,101.029-35.945-2.967,107.192,60.606-88.464,60.607,88.464-2.967-107.192,101.029,35.945-65.4-84.977,102.862-30.3-102.862-30.3,65.4-84.976L253.765,107.192,256.732,0ZM182.755,217.659c-6.314,0-11.088-3.695-14.4-11.087a41.335,41.335,0,0,1-3.542-19.249A43.063,43.063,0,0,1,170.2,168c4.081-7.314,9.24-11.01,15.477-11.01s11.087,3.7,14.4,11.087a41.692,41.692,0,0,1,3.542,19.249,44.13,44.13,0,0,1-5.467,19.326c-4.081,7.315-9.163,11.01-15.4,11.01Zm70.993-20.4-10.626-.539,2.849-38.421,16.246,2.618c-2.695,8.161-4.542,14.09-5.467,17.786a107.346,107.346,0,0,0-3,18.556ZM208.7,215.889c-.077-1.155-.231-4.466-.385-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.238-2.388,13.32-3.542,18.248-3.542,6.852,0,10.7,2.386,11.627,7.083a20.05,20.05,0,0,1,.385,3.619c0,8.161-6.006,16.708-18.094,25.717.23,5.774.615,11.395,1.154,17.016L208.7,215.889Zm-72.764,0c-.076-1.155-.23-4.466-.384-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.237-2.388,13.32-3.542,18.248-3.542,6.853,0,10.7,2.386,11.626,7.083a19.872,19.872,0,0,1,.385,3.619c0,8.161-6.005,16.708-18.094,25.717.232,5.774.616,11.395,1.155,17.016l-11.165,3.311ZM245.876,218.7a7.345,7.345,0,0,1-3.985-1.116,4.922,4.922,0,0,1-2.619-4.619,7.007,7.007,0,0,1,2.541-5.313,10.794,10.794,0,0,1,5.544-2.541,11.449,11.449,0,0,1,1.261-.073,7.726,7.726,0,0,1,4.205,1.152,5.15,5.15,0,0,1,2.7,4.619,6.841,6.841,0,0,1-2.619,5.312,11.34,11.34,0,0,1-5.543,2.465,10.061,10.061,0,0,1-1.481.114Z"/></g></svg>
</div>
</div>
</div>

Put to SVGs in the same wrapping element. Hide one, show the other using CSS, then swap the class name for the POP.
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1".../></svg>
<svg id="Pop1" class="hideme" data-name="Pop_1".../></svg>
</div>
.hideme { display:none }

You can add pop div into the theTurtle div and add below css changes.
.theTurtle{
position:relative;
}
.pop {
position: absolute;
opacity: 0;
top: 0;
left: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
I have changed top to -10px and left to 50px of .pop class style.
See the Snippet below:
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.flying img {
max-width: 150px;
position: absolute;
top: 20px;
transform: translateX(-30vw);
animation: moveBird 2s linear 16.9s 1 forwards;
}
#-webkit-keyframes moveBird {
0% {
transform: translateX(-30vw) rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: translateX(45vw) rotate(3deg);
}
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 2s linear .2s 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
.turtle {
position: absolute;
top: 50px;
transform: translateX(-50vw);
opacity: 1;
animation: moveTurtle 5s linear 1s 1 none,
moveTurtleStop 11s linear 6s 1 forwards,
moveTurtleRotate 5s linear 17s infinite forwards,
hideOpacity 1s linear 19s 1 forwards;
width: 250px;
}
.theTurtle{
position:relative;
}
.pop {
position: absolute;
opacity: 0;
top: -10px;
left: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
#-webkit-keyframes pow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes hideOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes moveTurtle {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleRotate {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(50vw) rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleStop {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(75vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#-webkit-keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<div class="BalloonContainer">
<div class="flying">
<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
</div>
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_1</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="firstBalloon swingimage">
<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_2</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="secondBalloon swingimage">
<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_3</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="thirdBalloon swingimage">
<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_4</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="theTurtle">
<div class="turtle swingimage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.826 171.637"><defs><style>.cls-1{fill:#171618;}</style></defs><title>turtleandBalloon</title><g id="balloonTotalMain"><polygon id="stringMain" class="cls-1" points="38.5 121.946 40.57 53.946 41.734 53.946 42.5 121.946 38.5 121.946"/><path id="bPiece_8" class="cls-1" d="M37.608,52.314a3.2,3.2,0,0,1-2.537-1.509c-.841-1.122-1.6-2.316-2.265-3.37a24.353,24.353,0,0,0-1.788-2.6,6.229,6.229,0,0,1-1.745,2.484l-.7.654-.648-.71a45.517,45.517,0,0,1-8.488-12.955l-.348-.83.809-.394a23.644,23.644,0,0,1,9.887-2.607,12.738,12.738,0,0,1,4.482.772c4,1.5,5.27,2.77,6.29,3.79.873.873,1.45,1.45,4.006,1.876.5.083.929.151,1.3.21,1.876.3,2.508.4,2.745,1.171.221.72-.294,1.2-.839,1.713a13.461,13.461,0,0,0-2.547,3.1c-.435.725-.871,1.5-1.306,2.266C41.9,48.942,39.989,52.314,37.608,52.314Z" transform="translate(0)"/><path id="bPiece_7" class="cls-1" d="M38.771,58.327l-.279-.279c-.919-.919-.351-2.028.211-2.8-.253-.061-.549-.137-.9-.233l.09-1.855a5.7,5.7,0,0,0,3.762-2.436c-.478-.6-.793-2.114,4.926-7.832l1.16-1.16,2.668,9.782-.553.384A32.485,32.485,0,0,1,44.6,54.89c.84,1.045,1.077,1.831.791,2.523a1.563,1.563,0,0,1-1.464.914Z" transform="translate(0)"/><path id="bPiece_6" class="cls-1" d="M51.541,49.085c-.379-.864-.777-1.619-1.128-2.286-.8-1.521-1.379-2.619-1.035-3.688a2.327,2.327,0,0,1,1.264-1.347c.459-.229.4-.843-.021-2.573a13.811,13.811,0,0,1-.506-3.24A2.445,2.445,0,0,1,52.726,33.2c1.515,0,3.662.811,6.313,1.871a11.3,11.3,0,0,0,2.344.675l1.216.2-.5,1.127a35.34,35.34,0,0,1-9.059,12.35l-.976.855Z" transform="translate(0)"/><path id="bPiece_5" class="cls-1" d="M60.97,34.233c-2.069,0-6.1-2.761-7.838-5.371-.727-1.091-1.157-1.8-.853-2.507a1.522,1.522,0,0,1,1.3-.8,2.591,2.591,0,0,0,1.58-.749c.641-.641.641-.641-.076-1.757a21.183,21.183,0,0,1-2.039-3.882,3.453,3.453,0,0,1,.01-3.3,3.4,3.4,0,0,1,3.023-1.233,11.437,11.437,0,0,1,2.373.288l3.905-3.255.546,1.049a23.4,23.4,0,0,1,1.962,15.318,41.07,41.07,0,0,1-1.216,4.934l-.186.593-.617.068a1.511,1.511,0,0,0-.634.153,1.684,1.684,0,0,1-1.236.458Z" transform="translate(0)"/><path id="bPiece_4" class="cls-1" d="M46.6,35.438c-1.948,0-4.19-1.226-5.673-2.037-.295-.161-.553-.3-.763-.407-1.261-.631-1.955-2.074-1.955-4.065a13.4,13.4,0,0,1,1.529-5.782c.814-1.629-.922-3.439-3.464-5.816-1.451-1.357-2.822-2.639-3.253-3.931a2.483,2.483,0,0,1,.348-2.318c1.137-1.577,4-2.149,5.644-2.149a3.255,3.255,0,0,1,2.188.577,1.147,1.147,0,0,0,.256.023,9.438,9.438,0,0,0,6.85-4.478,4.728,4.728,0,0,1,3.6-2.272l.315-.061.288.141a24.215,24.215,0,0,1,6.837,4.955l.9.944-1.176.571c-1.184.575-1.776,2.35-2.348,4.066-1.1,3.3-1.5,3.456-6.43,4.442-1.9.379-1.529,3.177-.75,7.4.463,2.51.941,5.106.545,7.087A3.418,3.418,0,0,1,46.6,35.438Z" transform="translate(0)"/><path id="bPiece_3" class="cls-1" d="M34.744,6.628a41.641,41.641,0,0,1-6.839-.642l-2.144-.361,1.72-1.33a31.067,31.067,0,0,1,4.592-3l.061-.031.065-.021A25.071,25.071,0,0,1,40.14,0a28.537,28.537,0,0,1,9.942,1.811L53.227,3l-3.3.642c-1.9.37-3.83.872-5.7,1.358a61.208,61.208,0,0,1-6.356,1.429A22.338,22.338,0,0,1,34.744,6.628Z" transform="translate(0)"/><path id="bPiece_2" class="cls-1" d="M38.856,35.344c-.626,0-1.353-.411-2.681-1.518s-3.576-1.674-6.669-1.674A44.457,44.457,0,0,0,19.948,33.4l-.815.184-.288-.784a33.419,33.419,0,0,1-1.565-5.73C15.311,15.914,22.554,8.23,27.046,4.643l.438-.349L28,4.507A4.327,4.327,0,0,1,29.954,5.9l.226.33L30.1,6.62c-.044.219-1.12,5.364-5.463,6.45-.446.111-.889.623-1.283,1.478-1.8,3.91-1.525,12.217-.953,13.36a1.188,1.188,0,0,0,.594.1c2.022,0,5.736-1.887,6.272-2.958.376-.751.376-3.224.376-5.406,0-2.592,0-5.273.524-6.848.128-.384.518-1.552,1.537-1.552,1.628,0,2.087,3.241,2.194,4.346.242.154.708.39,1.1.587,1.764.893,4.431,2.242,5.082,4.5a4.177,4.177,0,0,1-.573,3.388c-1.186,1.976-.366,5.247.176,7.411.441,1.757.683,2.725.156,3.4A1.219,1.219,0,0,1,38.856,35.344Z" transform="translate(0)"/><path id="bPiece_1" class="cls-1" d="M37.808,55.018c-.941-.262-1.8-.548-1.8-.548l-.128-.043-.111-.076a50.878,50.878,0,0,1-7.848-7.087l-.636-.7.691-.643a4.436,4.436,0,0,0,1.24-1.706c.42-1.258,1.124-1.522,1.642-1.522,1.2,0,2.089,1.4,3.558,3.719.648,1.024,1.382,2.185,2.178,3.246.256.341.64.748,1.014.748,1.27,0,3.222-3.454,4.647-5.976.444-.784.887-1.569,1.331-2.308a14.855,14.855,0,0,1,2.4-3.051c-.137-.023-1.237-.2-1.74-.281-3.158-.526-4.03-1.4-5.04-2.408-.889-.889-2-2-5.612-3.352a10.807,10.807,0,0,0-3.813-.651A21.766,21.766,0,0,0,20.728,34.8l-.905.442-.39-.929c-.207-.494-.4-1-.588-1.508l-.376-1.019,1.059-.239a46.388,46.388,0,0,1,9.978-1.295c3.551,0,6.2.711,7.888,2.115.267.222.49.4.676.539-.072-.314-.158-.655-.235-.965-.619-2.469-1.555-6.2.038-8.855a2.327,2.327,0,0,0,.376-1.879c-.421-1.458-2.642-2.582-4.112-3.325-1.318-.667-2.113-1.069-2.113-1.923a8.684,8.684,0,0,0-.262-1.607,40.322,40.322,0,0,0-.214,5.3c0,2.739,0,5.1-.577,6.258C30,27.839,25.462,29.914,23,29.914a2.31,2.31,0,0,1-2.3-1.155c-.927-1.855-1-10.818.927-15.006a4.087,4.087,0,0,1,2.55-2.53c2.516-.63,3.591-3.374,3.931-4.5a3.714,3.714,0,0,0-.827-.458l-1.5-.615,1.7-1.357.331-.257.412.07a39.9,39.9,0,0,0,6.522.614A20.471,20.471,0,0,0,37.6,4.539,60.105,60.105,0,0,0,43.75,3.152c1.9-.494,3.861-1,5.814-1.384l.265-.051.252.094c.829.311,1.648.666,2.434,1.052l2.538,1.248-2.776.541a3.006,3.006,0,0,0-2.262,1.255,11.139,11.139,0,0,1-8.554,5.53,2.1,2.1,0,0,1-1.541-.522l0,0a4.733,4.733,0,0,0-.9-.08c-1.507,0-3.513.546-4.1,1.359a.6.6,0,0,0-.086.6c.278.835,1.533,2.008,2.746,3.143,2.4,2.242,5.381,5.032,3.867,8.058-1.769,3.539-1.644,6.683-.426,7.292.228.114.507.267.825.441,1.234.674,3.3,1.8,4.76,1.8.68,0,1.348-.191,1.626-1.579.324-1.622-.121-4.035-.551-6.368-.764-4.142-1.629-8.838,2.249-9.613,4.22-.844,4.22-.844,5-3.177.7-2.091,1.417-4.252,3.323-5.177l.624-.3.48.5A21.346,21.346,0,0,1,62.9,12.709l.354.681-4.342,3.618-.485-.137a9.989,9.989,0,0,0-2.351-.34c-.737,0-1.278.148-1.446.4s-.106.812.181,1.53a19.3,19.3,0,0,0,1.872,3.558c.865,1.345,1.548,2.407-.178,4.134a4.325,4.325,0,0,1-2.1,1.178c.082.13.184.288.31.477,1.525,2.287,5.061,4.521,6.252,4.524a3.07,3.07,0,0,1,1.661-.6l1.451-.162-.437,1.393A38.8,38.8,0,0,1,62.1,37.067l-.3.673-.726-.119a13.148,13.148,0,0,1-2.744-.786C56.046,35.921,53.9,35.1,52.726,35.1c-.47,0-.706,0-.706.851a12.127,12.127,0,0,0,.452,2.792c.428,1.772.913,3.779-.979,4.725-.215.108-.291.193-.3.227a6.142,6.142,0,0,0,.907,2.217c.366.7.78,1.482,1.187,2.407l.281.638-.525.461a36.019,36.019,0,0,1-3.18,2.483l-1.107.767-1.973-7.233a20.392,20.392,0,0,0-3.406,4.381,1.666,1.666,0,0,1,.125,1.4c-.465,1.477-2.694,3.363-5.271,3.818l-.213.038ZM27.559,25a21.326,21.326,0,0,1,2.882-14.059c-3.465,2.727-7.247,7.3-6.617,14.059Z" transform="translate(0)"/></g><g id="turtleMain"><path id="turtleBody" class="cls-1" d="M103.914,147.832a37.959,37.959,0,0,0-6.666-6.665s-1.9-2.857-6.665-1.905-9.522,2.857-7.617.953,1.9-2.857-.953-2.857c-.952,0-17.139-15.235-27.613-17.139s-11.426-2.857-19.043-2.857c0,0-17.14-.952-31.422,19.044,0,0-4.761.952-3.809,3.809s7.617,7.617,5.713,10.474-6.665,8.569-3.809,11.426S16.313,156.4,16.313,156.4s17.139,11.426,39.039.952c0,0,1.905,0,1.905,3.809s-.952,10.474,1.9,10.474,9.522-11.427,9.522-11.427,3.809-3.808.952-6.665c0,0-1.9-1.9-.952-2.856s6.665-5.713,10.474-.953,3.809,6.666,9.522,6.666,13.33-2.857,13.33-2.857S106.77,151.641,103.914,147.832Zm-99.027-8.57s24.756,34.279,72.366,0C77.253,139.262,32.5,180.206,4.887,139.262Zm88.077,11.427a4.285,4.285,0,1,1,4.284-4.285A4.285,4.285,0,0,1,92.964,150.689Z" transform="translate(0)"/><circle id="eyeballMain" class="cls-1" cx="94.392" cy="145.928" r="0.952"/></g></svg>
<div class="pop">
<svg id="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.251 373.053"><defs><style>.cls-1{fill:#ed2f2f;}</style></defs><title>pop</title><g id="letterHole"><path class="cls-1" d="M220.443,178.854c0-.954,0-1.871.024-2.806a12.231,12.231,0,0,1,3.405-.7c.088,0,.165,0,.232.007a9.469,9.469,0,0,1-2.129,2.623,15.561,15.561,0,0,1-1.532,1.409Z"/><path d="M223.872,173.387a17.568,17.568,0,0,0-5.312,1.232c-.078,1.463-.078,2.849-.078,4.235v4.157a19,19,0,0,0,4.851-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.77-1.617-2.31-1.617Z"/></g><g id="letterHole2"><path class="cls-1" d="M185.6,202.994a5.2,5.2,0,0,1-4.975-2.978,13.791,13.791,0,0,1-1.3-7.053,29.148,29.148,0,0,1,2.318-9.742c1.072-2.529,2.863-5.563,5.27-5.563,1.763,0,3.206,1.741,4.29,5.174a27.584,27.584,0,0,1,1.22,9.251,16.944,16.944,0,0,1-1.916,7.463C188.859,202.6,187.021,202.994,185.6,202.994Z"/><path d="M186.912,179.619c.729,0,1.7,1.529,2.406,3.757a25.656,25.656,0,0,1,1.145,8.608,15.057,15.057,0,0,1-1.691,6.646c-1.194,2.217-2.262,2.4-3.168,2.4a3.247,3.247,0,0,1-3.233-1.92,11.947,11.947,0,0,1-1.087-6.067A27.1,27.1,0,0,1,183.441,184c1.145-2.7,2.476-4.384,3.471-4.384m0-3.922c-2.771,0-5.158,2.233-7.083,6.775a30.95,30.95,0,0,0-2.464,10.395,15.692,15.692,0,0,0,1.54,8.084,7.122,7.122,0,0,0,6.7,4c2.848,0,5-1.463,6.622-4.466a18.974,18.974,0,0,0,2.155-8.315,29.434,29.434,0,0,0-1.309-9.933c-1.385-4.388-3.465-6.544-6.16-6.544Z"/></g><g id="letterHole3"><path class="cls-1" d="M147.681,178.854c0-.954,0-1.871.023-2.806a12.237,12.237,0,0,1,3.405-.7c.088,0,.165,0,.233.007a9.5,9.5,0,0,1-2.13,2.623,15.419,15.419,0,0,1-1.531,1.408Z"/><path d="M151.109,173.387a17.586,17.586,0,0,0-5.313,1.232c-.076,1.463-.076,2.849-.076,4.235v4.157a19.012,19.012,0,0,0,4.85-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.771-1.617-2.31-1.617Z"/></g><g id="full"><path class="cls-1" d="M196.125,281.119l-58.461,85.333,2.861-103.4L43.071,297.727l63.092-81.97L6.94,186.526l99.223-29.23L43.071,75.326,140.525,110,137.664,6.6l58.461,85.333L254.587,6.6,251.726,110l97.453-34.674-63.09,81.97,99.222,29.23-99.223,29.231,63.091,81.97-97.453-34.674,2.861,103.4Zm52.493-78.044a13.514,13.514,0,0,0-1.477.085,12.807,12.807,0,0,0-6.6,3,8.95,8.95,0,0,0-3.224,6.8,6.883,6.883,0,0,0,3.615,6.327,9.169,9.169,0,0,0,4.949,1.369,12.26,12.26,0,0,0,1.769-.134,13.325,13.325,0,0,0,6.49-2.881,8.808,8.808,0,0,0,3.344-6.837,7.092,7.092,0,0,0-3.636-6.295A9.641,9.641,0,0,0,248.618,203.075Zm-84.57-24.557a47.259,47.259,0,0,0-1.193,8.718,43.558,43.558,0,0,0,3.716,20.148c3.635,8.116,9.081,12.236,16.184,12.236,6.906,0,12.664-4.043,17.112-12.016a46.244,46.244,0,0,0,5.712-20.171,43.941,43.941,0,0,0-3.711-20.161c-3.639-8.126-9.087-12.247-16.187-12.247-6.957,0-12.741,4.043-17.19,12.017a44.035,44.035,0,0,0-2.729,5.858,19.435,19.435,0,0,0,.243-3.055,21.653,21.653,0,0,0-.418-3.981c-.781-3.97-3.763-8.683-13.554-8.683-5.192,0-11.538,1.225-18.862,3.641l-1.437.474.093,1.51c.441,7.1.979,16.388,1.229,25.189l.54,17.867c.147,5.4.3,8.845.387,10.156l.162,2.449L149.212,214l-.154-1.608c-.511-5.328-.873-10.534-1.1-15.882C156.073,190.332,161.406,184.383,164.048,178.518ZM224.8,157.181c-5.192,0-11.537,1.225-18.862,3.641l-1.437.474.093,1.51c.44,7.1.977,16.382,1.229,25.189l.54,17.867c.148,5.419.3,8.86.388,10.158l.163,2.446L221.975,214l-.155-1.608c-.511-5.333-.873-10.539-1.1-15.882,12.145-9.237,18.053-17.967,18.053-26.664a21.747,21.747,0,0,0-.418-3.98C237.568,161.894,234.586,157.181,224.8,157.181Zm16.222,41.393,14.535.738.15-1.9a106.2,106.2,0,0,1,2.945-18.217c.858-3.427,2.581-9.034,5.431-17.666l.722-2.185-20.628-3.324Z"/><path d="M252.442,13.2l-2.6,93.882-.158,5.724,5.394-1.919,88.485-31.482L286.28,153.831l-3.492,4.537,5.492,1.618,90.09,26.54-90.09,26.541-5.492,1.618,3.492,4.537,57.285,74.425L255.08,262.165l-5.394-1.919.158,5.723,2.6,93.883-53.081-77.48-3.236-4.723-3.235,4.723-53.081,77.48,2.6-93.883.158-5.723-5.394,1.919L48.686,293.647l57.285-74.425,3.492-4.537-5.492-1.618-90.09-26.541,90.09-26.54,5.492-1.618-3.492-4.537L48.686,79.406l88.485,31.482,5.394,1.919-.158-5.724-2.6-93.882,53.081,77.48,3.235,4.723,3.236-4.723L252.442,13.2M167.407,165c-.906-3.86-4.131-9.779-15.374-9.779-5.4,0-11.954,1.258-19.477,3.74l-2.873.947.187,3.02c.439,7.089.976,16.352,1.226,25.131l.539,17.852c.149,5.432.3,8.909.391,10.237l.323,4.9,4.706-1.4,11.166-3.31,3.1-.919-.309-3.216c-.475-4.955-.821-9.805-1.052-14.763A67.918,67.918,0,0,0,160.9,187.085l0,.064a45.468,45.468,0,0,0,3.881,21.027c4.962,11.08,12.515,13.406,17.978,13.406,7.671,0,14-4.382,18.824-13.021a46.325,46.325,0,0,0,2.725-5.787l.094,3.136c.149,5.452.3,8.924.392,10.24l.327,4.894,4.7-1.4,11.164-3.31,3.1-.919-.308-3.216c-.476-4.96-.822-9.809-1.052-14.762,12.113-9.409,18.009-18.451,18.009-27.6a23.746,23.746,0,0,0-.459-4.377c-.753-3.827-3.766-10.248-15.475-10.248-5.4,0-11.953,1.258-19.477,3.739l-2.873.948.187,3.02q.049.8.1,1.633c-4.942-9.442-11.92-11.5-17.052-11.5-7.392,0-13.535,4.014-18.274,11.935m89.949,36.368.3-3.8a104.3,104.3,0,0,1,2.9-17.914c.841-3.361,2.553-8.924,5.387-17.509l1.442-4.37-4.543-.732L246.6,154.423l-4.22-.68-.316,4.263-2.849,38.421-.3,4,4.01.2,10.626.539,3.807.194m-17.466,19.59a11.316,11.316,0,0,0,5.986,1.664,14.133,14.133,0,0,0,2.058-.157,15.243,15.243,0,0,0,7.435-3.3l.053-.043.051-.045a10.782,10.782,0,0,0,3.968-8.273,9.064,9.064,0,0,0-4.551-7.953,11.709,11.709,0,0,0-6.272-1.74,15.5,15.5,0,0,0-1.695.1l-.07.008-.07.01a14.694,14.694,0,0,0-7.524,3.445l-.042.036-.041.037a10.943,10.943,0,0,0-3.826,8.216,8.856,8.856,0,0,0,4.54,7.994M256.732,0,196.125,88.464,135.519,0l2.967,107.192L37.457,71.247l65.405,84.976L0,186.526l102.862,30.3-65.4,84.977,101.029-35.945-2.967,107.192,60.606-88.464,60.607,88.464-2.967-107.192,101.029,35.945-65.4-84.977,102.862-30.3-102.862-30.3,65.4-84.976L253.765,107.192,256.732,0ZM182.755,217.659c-6.314,0-11.088-3.695-14.4-11.087a41.335,41.335,0,0,1-3.542-19.249A43.063,43.063,0,0,1,170.2,168c4.081-7.314,9.24-11.01,15.477-11.01s11.087,3.7,14.4,11.087a41.692,41.692,0,0,1,3.542,19.249,44.13,44.13,0,0,1-5.467,19.326c-4.081,7.315-9.163,11.01-15.4,11.01Zm70.993-20.4-10.626-.539,2.849-38.421,16.246,2.618c-2.695,8.161-4.542,14.09-5.467,17.786a107.346,107.346,0,0,0-3,18.556ZM208.7,215.889c-.077-1.155-.231-4.466-.385-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.238-2.388,13.32-3.542,18.248-3.542,6.852,0,10.7,2.386,11.627,7.083a20.05,20.05,0,0,1,.385,3.619c0,8.161-6.006,16.708-18.094,25.717.23,5.774.615,11.395,1.154,17.016L208.7,215.889Zm-72.764,0c-.076-1.155-.23-4.466-.384-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.237-2.388,13.32-3.542,18.248-3.542,6.853,0,10.7,2.386,11.626,7.083a19.872,19.872,0,0,1,.385,3.619c0,8.161-6.005,16.708-18.094,25.717.232,5.774.616,11.395,1.155,17.016l-11.165,3.311ZM245.876,218.7a7.345,7.345,0,0,1-3.985-1.116,4.922,4.922,0,0,1-2.619-4.619,7.007,7.007,0,0,1,2.541-5.313,10.794,10.794,0,0,1,5.544-2.541,11.449,11.449,0,0,1,1.261-.073,7.726,7.726,0,0,1,4.205,1.152,5.15,5.15,0,0,1,2.7,4.619,6.841,6.841,0,0,1-2.619,5.312,11.34,11.34,0,0,1-5.543,2.465,10.061,10.061,0,0,1-1.481.114Z"/></g></svg>
</div>
</div>
<!-- POW -->
</div>
</div>

Styling and SVG circle inside a <use> without using the * symbol?

I'm using the <use> element to show duplicate SVG's. My problem is I want to style a specific part of the SVG, currently I'm doing: .spinner svg * {...}, I'm using the catch-all * because I cannot find the element I should be focusing.
I've tried .spinner svg circle {...} and all other combinations but nothing is working.
If the styling is working than the inner circle will fill pink.
So for clarity, the .spinner svg * { ... } works but because I want to add more to this SVG, I can no longer use it, and want to target the circle element directly. How may I do this?
.spinner
{
display: inline-block;
width: 3rem;
height: 3rem;
-webkit-animation: container 1568ms linear infinite;
animation: container 1568ms linear infinite;
}
.spinner svg
{
width: 100%;
height: 100%;
-webkit-animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite;
animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite;
stroke: #fd75c5;
}
.spinner svg *
{
transition: stroke 133ms linear;
-webkit-animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite;
animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite;
fill: transparent;
stroke-width: .2rem;
fill: pink;
}
#-webkit-keyframes container
{
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes container
{
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes svg-spin
{
12.5%
{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5%
{
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50%
{
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5%
{
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75%
{
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5%
{
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
100%
{
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
#keyframes svg-spin
{
12.5%
{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5%
{
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50%
{
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5%
{
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75%
{
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5%
{
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
100%
{
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
#-webkit-keyframes circle-spin
{
0%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
50%
{
stroke-dasharray: 100 25;
stroke-dashoffset: 50;
}
100%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
}
#keyframes circle-spin
{
0%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
50%
{
stroke-dasharray: 100 25;
stroke-dashoffset: 50;
}
100%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
}
<svg style="display:none">
<defs>
<symbol id="loader" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" />
</symbol>
</defs>
</svg>
<div class="spinner">
<svg><use xlink:href="#loader"></svg>
</div>

You can't style the circle via the SVG that references it. You can think of it that as the symbol doesn't exist under <div class="spinner"><use> so you can't style it that way.
What you could do is style is via the symbol. For example:
#loader circle {
fill: pink;
}
But that will change every reference to #loader. If you need to have several different spinners each styled differently, then you need to have separate copies of the spinner symbol.

Increasing a material loader's size

I have a material loader, and I'm having difficulties figuring out how to enlarge the animation.
HTML & CSS:
.loading-directive {
position:relative;
clear:both;
top: 37px
}
.loading-directive .loader {
position:relative;
margin:0 auto;
width:65px;
height:64px;
zoom:1;
}
.loading-directive .circular {
-webkit-animation:loadingrotate 2s linear infinite;animation:loadingrotate 2s linear infinite;height:64px;position:relative;width:65px
}
.loading-directive .path {
stroke-dasharray:1,200;
stroke-dashoffset:0;
-webkit-animation:loadingdash 1.5s ease-in-out infinite;animation:loadingdash 1.5s ease-in-out infinite;
stroke-linecap:round;
stroke:#333333;
}
#-webkit-keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#-webkit-keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
#keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>
Loader in question:
https://jsfiddle.net/012k581h/
I need the loader to be 25% larger than displayed here. What properties must be adjusted to achieve this?

You can use the the scale property using css
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
See snippet below
.loading-directive {
position: relative;
clear: both;
top: 37px
}
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
.loading-directive .circular {
-webkit-animation: loadingrotate 2s linear infinite;
animation: loadingrotate 2s linear infinite;
height: 64px;
position: relative;
width: 65px
}
.loading-directive .path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: loadingdash 1.5s ease-in-out infinite;
animation: loadingdash 1.5s ease-in-out infinite;
stroke-linecap: round;
stroke: #333333;
}
#-webkit-keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#-webkit-keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
#keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>

SVG transform origin differences in FireFox / Chrome [duplicate]

This question already has answers here:
transform-origin not working in Firefox even properties in percentage value
(3 answers)
Closed 6 years ago.
Here is my character animation I was working on, which is working fine in Chrome but in FireFox it's kind of mess because FireFox has a different method of calculating transform origin related to the SVG canvas itself not to the group object.
.st0 {
fill: #30363f;
}
.st1 {
fill: #dba897;
}
.st2 {
fill: #e2e2e2;
}
.st3 {
fill: #1f2329;
}
.st4 {
fill: #60562b;
}
.st5 {
fill: #bf9286;
}
.st6 {
fill: #251b1b;
}
.st7 {
fill: #2d1c1c;
}
.st8 {
fill: #fff;
}
.st9 {
fill: #46ba7c;
}
.st10 {
fill: #ccc;
}
svg {
display: block;
max-width: 400px;
margin: auto;
}
g {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#head {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: head-rotate 10s infinite;
animation: head-rotate 10s infinite;
}
#arm-l {
-webkit-transform-origin: 80% 2%;
transform-origin: 80% 2%;
-webkit-animation: arm-anger 5s infinite;
animation: arm-anger 5s infinite;
}
#hand-l {
-webkit-transform-origin: 70% 12%;
transform-origin: 70% 12%;
-webkit-animation: hand-anger 5s infinite;
animation: hand-anger 5s infinite;
}
#desk {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: desk-anger 5s infinite;
animation: desk-anger 5s infinite;
}
#eye-r,
#eye-l {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: eye-blinking 10s infinite;
animation: eye-blinking 10s infinite;
}
#arm-r {
-webkit-transform-origin: 30% 2%;
transform-origin: 30% 2%;
}
#hand-r {
-webkit-transform-origin: 30% 12%;
transform-origin: 30% 12%;
}
#-webkit-keyframes head-rotate {
0% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
}
#keyframes head-rotate {
0% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
}
#-webkit-keyframes arm-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
10% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
15% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes arm-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
10% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
15% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes hand-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
10% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
15% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes hand-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
10% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
15% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes desk-anger {
9% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
13% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
15% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes desk-anger {
9% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
13% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
15% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes eye-blinking {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
1% {
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
2% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes eye-blinking {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
1% {
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
2% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
<svg version="1.1" id="character_1" viewBox="0 0 1024 1024" preserveAspectRatio="xMinYMin meet">
<g id="body">
<g id="arm-r">
<path id="upperArm-r" class="st0" d="M582.7,804.3L582.7,804.3c-7.3,2.1-14.8-2-17-9.3l-24.2-82.9l26.3-7.7l24.2,82.9
C594.1,794.5,590,802.1,582.7,804.3z" />
<g id="hand-r">
<path class="st1" d="M604.4,857.2l-1.9-6.6l-11.2,3.3l1.9,6.6c-3.8,3.4-5.6,8.8-4.1,14.1c2.1,7.3,9.7,11.4,17,9.3
s11.4-9.7,9.3-17C613.8,861.7,609.4,858,604.4,857.2z" />
<rect x="584.1" y="847.1" transform="matrix(0.9598 -0.2806 0.2806 0.9598 -214.7713 201.5524)" class="st2" width="24.6" height="7.1" />
<path class="st0" d="M607.8,841l-26.3,7.7l-15.6-53.4c-2.1-7.3,2-14.8,9.3-17v0c7.3-2.1,14.8,2,17,9.3L607.8,841z" />
<rect x="578.9" y="839.8" transform="matrix(0.9598 -0.2806 0.2806 0.9598 -213.2036 200.8397)" class="st3" width="31.5" height="10.1" />
</g>
</g>
<g id="arm-l">
<path id="upperArm-l" class="st0" d="M441,804.3L441,804.3c7.3,2.1,14.8-2,17-9.3l24.2-82.9l-26.3-7.7l-24.2,82.9
C429.6,794.5,433.8,802.1,441,804.3z" />
<g id="hand-l">
<path class="st1" d="M419.4,857.2l1.9-6.6l11.2,3.3l-1.9,6.6c3.8,3.4,5.6,8.8,4.1,14.1c-2.1,7.3-9.7,11.4-17,9.3
c-7.3-2.1-11.4-9.7-9.3-17C409.9,861.7,414.3,858,419.4,857.2z" />
<rect x="415.1" y="847.1" transform="matrix(-0.9598 -0.2806 0.2806 -0.9598 598.7922 1787.1604)" class="st2" width="24.6" height="7.1" />
<path class="st0" d="M415.9,841l26.3,7.7l15.6-53.4c2.1-7.3-2-14.8-9.3-17l0,0c-7.3-2.1-14.8,2-17,9.3L415.9,841z" />
<rect x="413.3" y="839.8" transform="matrix(-0.9598 -0.2806 0.2806 -0.9598 603.7693 1776.2122)" class="st3" width="31.5" height="10.1" />
</g>
</g>
<g id="clothes">
<polygon class="st2" points="520.7,864.7 520.7,683.9 503.3,683.9 503.3,864.7 456.2,864.7 456.2,874.2 567.8,874.2 567.8,864.7
" />
<path class="st3" d="M531.7,681.8c0,3.5-5.7,6.4-13.5,7.4c-1.9,0.3-4,0.4-6.1,0.4c-2.1,0-4.2-0.1-6.1-0.4c-7.9-1-13.5-4-13.5-7.4
c0-4.3,8.8-7.8,19.7-7.8C522.9,674,531.7,677.5,531.7,681.8z" />
<ellipse class="st2" cx="512" cy="685.3" rx="13.4" ry="5.4" />
<path class="st0" d="M505.9,689.3c-7.9-1-13.5-4-13.5-7.4V693l-36.1,11.3v160.4h47V704.2h2.6V689.3z" />
<path class="st0" d="M531.7,693v-11.2c0,3.5-5.7,6.4-13.5,7.4v14.9h2.6v160.5h47V704.3L531.7,693z" />
<circle class="st4" cx="512" cy="751.9" r="1.8" />
<circle class="st4" cx="512.1" cy="722.5" r="1.8" />
<circle class="st4" cx="512" cy="781.3" r="1.8" />
<circle class="st4" cx="512" cy="810.7" r="1.8" />
<circle class="st4" cx="512" cy="840.1" r="1.8" />
<path class="st5" d="M500.2,664.4v18.8c0,2.6,5.3,4.7,11.8,4.7c6.5,0,11.8-2.1,11.8-4.7v-18.8H500.2z" />
</g>
</g>
<g id="head">
<path id="ear-r" class="st1" d="M638.2,511.8h-8.7v-76.4h8.7c9.8,0,17.7,7.9,17.7,17.7v41.1C655.8,503.9,647.9,511.8,638.2,511.8z" />
<path id="ear-l" class="st1" d="M385.8,511.8h8.7v-76.4h-8.7c-9.8,0-17.7,7.9-17.7,17.7v41.1C368.2,503.9,376.1,511.8,385.8,511.8z
" />
<path id="face" class="st1" d="M386.5,316.8v255.9c0,5,1.5,9.9,4.3,14.1l58.7,72.5c7.8,9.6,19.5,15.2,31.9,15.2h61.3
c12.4,0,24.1-5.6,31.9-15.2l58.7-72.5c2.8-4.2,4.3-9.1,4.3-14.1V316.8H386.5z" />
<polygon id="eyebrow-r" class="st6" points="595.2,463.9 521.3,480.2 591.1,451.2 " />
<g id="eye-r">
<circle class="st7" cx="558.3" cy="505.3" r="15.7" />
<circle class="st8" cx="551.1" cy="498.1" r="4.4" />
</g>
<polygon id="eyebrow-l" class="st6" points="437.8,441.2 502.5,480.2 431.9,453.2 " />
<g id="eye-l">
<circle class="st7" cx="465.7" cy="505.3" r="15.7" />
<circle class="st8" cx="457.9" cy="497.4" r="3.8" />
</g>
<path id="hair" class="st6" d="M625.8,293.2c-4.1-0.3-7.9,1.5-10.3,4.3c-1.6,1.8-4.5,1.9-6.1,0c-2.3-2.7-5.7-4.4-9.5-4.4
s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0
c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0
c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4
c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4
c-1.6,1.8-4.5,1.8-6.1,0c-2.5-2.9-6.2-4.6-10.3-4.3c-6.7,0.4-11.7,6.3-11.7,13v1.5v7.6v35.3v83.7V476H399v-41.8l12.6-12.6v-67.3
c0-2.1,1.7-3.8,3.8-3.8h193.2c2.1,0,3.8,1.7,3.8,3.8v67.3l12.6,12.6V476h12.6v-41.8v-83.7v-35.3v-7.6v-1.5
C637.5,299.5,632.5,293.6,625.8,293.2z" />
<polygon id="mouth" class="st8" points="460.1,600.5 562.6,601 563.9,578 461.7,592.5 " />
</g>
<rect id="desk" x="166" y="867.8" class="st9" width="692" height="25.8" />
<g id="laptop">
<polygon class="st10" points="627.6,738.7 396.4,738.7 402.4,873.3 621.6,873.3 " />
<circle class="st8" cx="510.4" cy="811.4" r="22.2" />
</g>
</svg>
Here is the question is there is a way that i can make FireFox behave like Chrome or reverse Chrome act like FireFox so my animation can run on cross browsers.

When i used absolute values instead of percentage it worked fine
for instance change transform-origin: 50% 50% to transform-origin: 512px 660px
The working code
See the Pen Just developing by Abdelrahman Ismail (#ismail9k) on CodePen.

css3 keyframe animation for path in svg symbol tag

Is it possible to animate a path in the symbol tag with css3 keyframe animation? It doesn't work in my case.
Example:
http://codepen.io/anon/pen/Hfbmr
HTML:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-love" viewBox="0 0 54 54">
<title>Love</title>
<path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
<path id="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
/>
</symbol>
CSS:
.icon-love {
height: 54px;
width: 54px;
}
#icon-love-heart {
animation-name: 'heartbeat';
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
Cheers Philip

It is perfectly possible. It works if you drop <use xlink:href="#icon-love"/> part and just use normal svg. If you are concenrned about maintaining your code clean I suggest you store your svg in a variable and output it dynamically instead of using the <use> tag, which breaks the animation.
http://codepen.io/easwee/pen/xFDbu
<svg class="icon-love" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
<path class="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
/>
</svg>
Also added prefixes for crossbrowser css (webkit, firefox and standard):
.icon-love {width:54px;height:54px;}
.icon-love-heart {
-moz-animation: heartbeat 5s linear infinite;
-webkit-animation: heartbeat 5s linear infinite;
animation: heartbeat 5s linear infinite;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
}
#-moz-keyframes heartbeat {
0% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1.08); }
50% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1.05); }
80% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}

Resources