CSS animate while dynamically changing translation

CSS animate while dynamically changing translation - javascript

I made an SVG bee that needs to fly. I'm successfully using JavaScript to dynamically change the variables --tranX and --tranY in the CSS #bee1 (for changing its location).
Those variables are passed to the 100% {} keyframe in CSS. However, the animation is not working.
Note: I've already successfully got the bee to move by just applying the transform, but then the bee would just hop from location to location without animation.
CSS for the bee:
#bee1 {
-webkit-animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
--tranX: 0;
--tranY: 0;
}
#-webkit-keyframes beeMove {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
-webkit-transform: translateX(var(--tranX)) translateY(var(--tranY));
transform: translateX(var(--tranX)) translateY(var(--tranY));
}
}
JavaScript for moving the bee (called every second):
for
(let bee of bees) {
bee.style.setProperty('--tranX', Math.random() * 340 + "px");
bee.style.setProperty('--tranY', Math.random() * 257 + "px");
}
https://jsfiddle.net/facechomp/3dbv15u6/26/

As per my comment, the CSS variables tranX and tranY are scoped to the #bee1 selector, and therefore the values are actually not accessible to the animation definition. If you simply want the bee to fly all over the place randomly without going back to its original position, you can update your code to this:
const _locationsInterval = 500; // ms
And for the CSS:
#bee1 {
transform: translateX(var(--tranX)) translateY(var(--tranY));
--tranX: 0;
--tranY: 0;
background: red;
transition: all 500ms ease-in-out;
}
const _wingsInterval = 500; // ms
const _locationsInterval = 500; // ms
var frontWings = document.getElementsByClassName('front-wing');
var backWings = document.getElementsByClassName('back-wing');
var bees = document.getElementsByClassName('bee');
///////////////////////////////////////////////////////////////////
// update all bees' wings every _wingsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
var rotFront = -Math.round(Math.random() * 10 + 5);
for (let wing of frontWings) {
wing.style.setProperty('--rotFront', rotFront + "deg");
}
var rotBack = -Math.round(Math.random() * 20 + 2);
for (let wing of backWings) {
wing.style.setProperty('--rotBack', rotBack + "deg");
}
}, _wingsInterval);
///////////////////////////////////////////////////////////////////
// update all bees' locations every _locationsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
for (let bee of bees) {
bee.style.setProperty('--tranX', Math.random() * 340 + "px");
bee.style.setProperty('--tranY', Math.random() * 257 + "px");
}
}, _locationsInterval);
body {
background-color: black;
}
.image-contain {
display: block;
margin: auto;
width: 800px;
}
.front-wing {
-webkit-animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
--tranX: -52%;
--tranY: -26%;
--rotFront: 0;
position: absolute;
}
#-webkit-keyframes flapWingFront {
0% {
-webkit-transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
}
100% {
-webkit-transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
}
}
.back-wing {
-webkit-animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
--btranX: -54%;
--btranY: -15%;
--rotBack: 0;
position: absolute;
}
#-webkit-keyframes flapWingBack {
0% {
-webkit-transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
}
100% {
-webkit-transform: rotate(var(--rotBack)) translateX(var(--btranX)) translateY(var(--btranY));
transform: rotate(var(--rotBack)) translateX(--var(--btranX)) translateY(var(--btranY));
}
}
#bee1 {
transform: translateX(var(--tranX)) translateY(var(--tranY));
--tranX: 0;
--tranY: 0;
background: red;
transition: all 500ms ease-in-out;
}
<div class="image-contain">
<svg id="bee1" class="bee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 340 275" width="75" height="50">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#c5c5c7"/>
<stop offset="1" stop-color="#c5c5c7" stop-opacity="0"/>
</linearGradient>
<path d="M453.56 309.74c-11.86-45.92-22.57-71.57-55.36-100.67-21.86-19.41-40.14-15.15-54.82 12.76.16 1.03.93 6.18 2.32 15.46" id="d"/>
<path d="M453.52 309.46c-78.71-25.57-114.71-49.86-107.99-72.87" id="b"/>
<path d="M329.87 244.41c10.67.51 18.19-1.54 20.5-13.36 9.08-46.7-15.06-50.63-24.91-52.94-9.86-2.31-32.31-8.05-41.92-1.55-6.41 4.34-9.41 9.32-8.99 14.94 1.11 4.69 1.8 7.61 2.08 8.78.38 1.62 1.01 3.16 1.87 4.56.33.54-.81-1.33-.69-1.12 1.55 2.53 2.63 5.33 3.17 8.26 1.64 8.8 3.98 14.55 7.02 17.25 19.13 16.95 35.93 14.91 41.87 15.18z" id="e"/>
<path d="M236.72 232.73l5.12 4.79-6.97 15.88 13.4-14.87-12.88-11.34-7.85 17.15z" id="f"/>
<path d="M262.3 156.27c-.45 1.33-1.37 4.11-1.83 5.45a1.22 1.22 0 0 1-1.61.76c-3.15-1.2-11.39-4.37-14.53-5.58a1.358 1.358 0 0 1-.8-1.7c.44-1.33 1.37-4.11 1.81-5.44.22-.67.96-1.02 1.62-.77l14.53 5.58c.68.26 1.04 1.01.81 1.7z" id="g"/>
<path d="M259.43 179.58c-.91.41-2.58 1.16-3.5 1.55a1 1 0 0 1-1.37-.62c-.91-2.8-3.25-10.14-4.16-12.95-.19-.62.1-1.28.69-1.54.92-.41 2.59-1.15 3.5-1.56.56-.24 1.2.04 1.38.62.91 2.81 3.25 10.16 4.16 12.96.19.61-.11 1.28-.7 1.54z" id="h"/>
<path d="M254.44 164.19c-.36 1.07-1.09 3.28-1.45 4.35-.18.53-.77.81-1.29.6-2.51-.96-9.08-3.48-11.58-4.44-.55-.21-.83-.8-.64-1.35.35-1.07 1.09-3.29 1.44-4.34.18-.54.77-.82 1.3-.62 2.5.97 9.07 3.48 11.58 4.46.54.19.82.79.64 1.34z" id="i"/>
<path d="M237.5 238.35c-10.09-8.2-9.08-28.86 2.26-46.12 11.32-17.26 28.73-24.61 38.81-16.42 10.09 8.2 9.08 28.87-2.25 46.12-11.34 17.26-28.73 24.61-38.82 16.42z" id="j"/>
<path d="M268.55 175.57c-1.13.51-3.24 1.44-4.38 1.95-.69.3-1.5-.05-1.73-.78-1.13-3.52-4.08-12.72-5.2-16.26-.25-.76.12-1.6.87-1.92 1.13-.51 3.24-1.45 4.38-1.95.69-.31 1.5.05 1.73.78 1.13 3.52 4.08 12.73 5.2 16.25.25.77-.13 1.6-.87 1.93z" id="k"/>
<path d="M247.35 234.76c-5.23-4-2.62-18.27 5.81-31.88 8.44-13.59 19.53-21.4 24.75-17.4 5.24 3.98 2.63 18.26-5.81 31.86-8.43 13.61-19.52 21.4-24.75 17.42z" id="l"/>
<path d="M248.97 218.74c-1.11-.9 2.26-8.12 7.51-16.1 5.25-7.98 10.41-13.73 11.51-12.83 1.12.9-2.25 8.11-7.5 16.09s-10.41 13.74-11.52 12.84z" id="m"/>
<linearGradient xlink:href="#a" id="n" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.09084 0 0 1 -28.066 14)"/>
<linearGradient xlink:href="#a" id="c" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72767 -.38085 .34914 .66708 10.105 193.084)"/>
</defs>
<g transform="translate(-177.91 -74.04)">
<use xlink:href="#b" width="100%" height="100%" fill="#eaad22"/>
<use xlink:href="#b" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<path class="back-wing" d="M300.374 200.434s116.837-96.705 117.927-71.09c1.09 25.615-6.342 42.957-111.889 75.617z" fill="url(#c)" transform="translate(-177.91 -88.04)"/>
<g transform="translate(-177.91 -88.04)">
<g transform="translate(0 14)">
<use xlink:href="#d" width="100%" height="100%" fill="#eaad22"/>
<use xlink:href="#d" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#e" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#e" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#f" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#f" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#g" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#g" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#h" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#h" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#i" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#i" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#j" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#j" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#k" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#k" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#l" width="100%" height="100%" fill="#3e3904"/>
<use xlink:href="#l" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#m" width="100%" height="100%" fill="#fff"/>
<use xlink:href="#m" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<path d="M336.576 240.154c4.009-.5-.136 5 1.328 6.432 1.4 1.37 9.97.116 7.93 2.627-2.134 2.628-10.78 3.916-15.078 6.175-4.108 2.158-8.267 7.628-12.097 8.105-4.008.5.137-5-1.328-6.432-1.4-1.37-9.97-.115-7.93-2.626 2.134-2.628 10.78-3.917 15.079-6.175 4.107-2.159 8.266-7.628 12.096-8.106z" fill="#463207"/>
<path d="M343.13 288.255c-2.381 5.955-6.17-4.324-9.066-3.485-2.768.803-7.628 13.69-9.247 8.793-1.695-5.125 3.178-18.145 3.57-25.956.375-7.465-3.366-17.74-1.09-23.43 2.382-5.956 6.17 4.324 9.066 3.484 2.768-.802 7.628-13.69 9.247-8.793 1.695 5.125-3.177 18.145-3.57 25.957-.375 7.464 3.366 17.74 1.09 23.43z" fill="#463207"/>
<ellipse cx="332.615" cy="297.798" rx="7.196" ry="21.188" fill="#463207"/>
<path d="M341.673 329.106c.457 2.686-2.767-2.585-3.492-2.412-.693.166.387 6.002-1.092 3.506-1.548-2.612-2.65-8.512-4.092-12.255-1.377-3.576-4.586-8.84-5.023-11.408-.457-2.686 2.768 2.585 3.493 2.412.693-.166-.387-6.002 1.092-3.506 1.548 2.612 2.65 8.512 4.091 12.254 1.378 3.577 4.587 8.842 5.023 11.409z" fill="#463207"/>
<ellipse cx="351.115" cy="128.439" rx="8.237" ry="25.267" transform="matrix(.91978 .39243 -.35584 .93455 0 0)" fill="#463207"/>
<path d="M254.936 313.666c-1.91-.697 1.976-11.42 2.96-16.422.984-5 .702-12.594 3.596-16.898 2.893-4.304 4.709 1.01 6.618 1.707 1.91.697 7.09-2.064 6.107 2.937-.984 5.001-6.686 10.41-9.58 14.715-2.893 4.304-7.791 14.658-9.701 13.961z" fill="#463207"/>
<path d="M237.744 319.857c-2.685.462 2.58-2.772 2.405-3.497-.166-.693-6.001.398-3.508-1.086 2.61-1.553 8.507-2.665 12.248-4.114 3.574-1.384 8.832-4.603 11.398-5.044 2.686-.462-2.58 2.772-2.405 3.497.167.693 6.002-.398 3.508 1.086-2.609 1.552-8.506 2.665-12.247 4.114-3.574 1.384-8.833 4.602-11.399 5.044zM288.076 232.159c-4.008-.5.137 5-1.328 6.432-1.399 1.369-9.97.115-7.93 2.626 2.134 2.628 10.78 3.916 15.079 6.175 4.107 2.159 8.266 7.628 12.097 8.106 4.008.5-.137-5 1.327-6.433 1.4-1.369 9.97-.115 7.93-2.626-2.134-2.628-10.78-3.916-15.078-6.175-4.108-2.158-8.267-7.628-12.097-8.105zM363.99 244.882c3.917.986-1.938 4.61-1.092 6.477.809 1.783 9.252 3.717 6.442 5.32-2.941 1.676-11.467-.254-16.292.295-4.61.525-10.467 4.118-14.21 3.176-3.918-.986 1.937-4.61 1.09-6.477-.808-1.783-9.251-3.717-6.44-5.32 2.94-1.676 11.466.254 16.29-.295 4.611-.525 10.468-4.118 14.212-3.176z" fill="#463207"/>
<path d="M370.502 303.896c-2.736 7.294-7.087-5.296-10.415-4.268-3.18.983-8.761 16.767-10.622 10.77-1.947-6.277 3.65-22.224 4.101-31.792.43-9.143-3.866-21.727-1.252-28.697 2.736-7.294 7.087 5.296 10.415 4.268 3.18-.983 8.761-16.767 10.622-10.77 1.947 6.277-3.65 22.224-4.101 31.792-.43 9.143 3.866 21.727 1.252 28.697z" fill="#463207"/>
<ellipse cx="238.882" cy="419.961" rx="7.196" ry="21.188" transform="rotate(-19.343)" fill="#463207"/>
<path d="M383.416 343.67c1.321 2.383-3.467-1.522-4.094-1.119-.599.386 2.353 5.536.13 3.67-2.325-1.952-5.319-7.153-7.919-10.207-2.484-2.919-7.256-6.823-8.518-9.1-1.32-2.384 3.467 1.521 4.094 1.118.6-.386-2.353-5.535-.13-3.67 2.325 1.952 5.319 7.154 7.919 10.208 2.485 2.918 7.256 6.823 8.518 9.1z" fill="#463207"/>
<path d="M415.769 310.79l-13.793-6.396s7.362-1.287 18.773-11.637c11.41-10.35 9.612-31.539 9.612-31.539s5.235 7.62 6.815 11.805c1.58 4.187-2.141 18.253-6.19 23.1-5.438 5.887-8.08 10.368-15.217 14.668zM388.927 298.598l-16.93-9.215s10.423-1.573 26.58-14.218c16.155-12.646 13.608-38.533 13.608-38.533s7.813 8.509 9.85 12.224c2.236 5.115-3.232 24.5-8.964 30.422-7.7 7.193-14.04 14.066-24.144 19.32z" fill="#2d2d2d"/>
</g>
<path class="front-wing" d="M308.975 201.42s197.045-41.837 182.552-11.024c-14.493 30.812-33.92 46.643-178.235 20.07z" fill="url(#n)" transform="translate(-177.91 -88.04)"/>
</svg>
</div>
However, if you want your bee to fly to a random position and back to its starting position, you might need a little more JS wizardry. What you need is basically to set 2 timers, one that transitions the bee to a randomly generated position and another back to coordinates of 0,0:
let iteration = 0;
setInterval(function() {
for (let bee of bees) {
const tranX = iteration % 2 ? 0 : Math.random() * 340;
const tranY = iteration % 2 ? 0 : Math.random() * 257;
bee.style.setProperty('--tranX', tranX + "px");
bee.style.setProperty('--tranY', tranY + "px");
iteration++;
}
}, _locationsInterval);
For this to work, your _locationsInterval must be the same duration as the transition-duration set on the bee.
The code above basically keeps track of the iteration used: if it is even-numbered, go back to original coordinates. If it is odd-numbered, go to a randomly-generated coordinates. This will create the effect of the bee going back and forth.
const _wingsInterval = 500; // ms
const _locationsInterval = 500; // ms
var frontWings = document.getElementsByClassName('front-wing');
var backWings = document.getElementsByClassName('back-wing');
var bees = document.getElementsByClassName('bee');
///////////////////////////////////////////////////////////////////
// update all bees' wings every _wingsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
var rotFront = -Math.round(Math.random() * 10 + 5);
for (let wing of frontWings) {
wing.style.setProperty('--rotFront', rotFront + "deg");
}
var rotBack = -Math.round(Math.random() * 20 + 2);
for (let wing of backWings) {
wing.style.setProperty('--rotBack', rotBack + "deg");
}
}, _wingsInterval);
///////////////////////////////////////////////////////////////////
// update all bees' locations every _locationsInterval ms
///////////////////////////////////////////////////////////////////
let iteration = 0;
setInterval(function() {
for (let bee of bees) {
const tranX = iteration % 2 ? 0 : Math.random() * 340;
const tranY = iteration % 2 ? 0 : Math.random() * 257;
bee.style.setProperty('--tranX', tranX + "px");
bee.style.setProperty('--tranY', tranY + "px");
iteration++;
}
}, _locationsInterval);
body {
background-color: black;
}
.image-contain {
display: block;
margin: auto;
width: 800px;
}
.front-wing {
-webkit-animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
--tranX: -52%;
--tranY: -26%;
--rotFront: 0;
position: absolute;
}
#-webkit-keyframes flapWingFront {
0% {
-webkit-transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
}
100% {
-webkit-transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
}
}
.back-wing {
-webkit-animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
--btranX: -54%;
--btranY: -15%;
--rotBack: 0;
position: absolute;
}
#-webkit-keyframes flapWingBack {
0% {
-webkit-transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
}
100% {
-webkit-transform: rotate(var(--rotBack)) translateX(var(--btranX)) translateY(var(--btranY));
transform: rotate(var(--rotBack)) translateX(--var(--btranX)) translateY(var(--btranY));
}
}
#bee1 {
transform: translateX(var(--tranX)) translateY(var(--tranY));
--tranX: 0;
--tranY: 0;
background: red;
transition: all 500ms ease-in-out;
}
<div class="image-contain">
<svg id="bee1" class="bee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 340 275" width="75" height="50">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#c5c5c7"/>
<stop offset="1" stop-color="#c5c5c7" stop-opacity="0"/>
</linearGradient>
<path d="M453.56 309.74c-11.86-45.92-22.57-71.57-55.36-100.67-21.86-19.41-40.14-15.15-54.82 12.76.16 1.03.93 6.18 2.32 15.46" id="d"/>
<path d="M453.52 309.46c-78.71-25.57-114.71-49.86-107.99-72.87" id="b"/>
<path d="M329.87 244.41c10.67.51 18.19-1.54 20.5-13.36 9.08-46.7-15.06-50.63-24.91-52.94-9.86-2.31-32.31-8.05-41.92-1.55-6.41 4.34-9.41 9.32-8.99 14.94 1.11 4.69 1.8 7.61 2.08 8.78.38 1.62 1.01 3.16 1.87 4.56.33.54-.81-1.33-.69-1.12 1.55 2.53 2.63 5.33 3.17 8.26 1.64 8.8 3.98 14.55 7.02 17.25 19.13 16.95 35.93 14.91 41.87 15.18z" id="e"/>
<path d="M236.72 232.73l5.12 4.79-6.97 15.88 13.4-14.87-12.88-11.34-7.85 17.15z" id="f"/>
<path d="M262.3 156.27c-.45 1.33-1.37 4.11-1.83 5.45a1.22 1.22 0 0 1-1.61.76c-3.15-1.2-11.39-4.37-14.53-5.58a1.358 1.358 0 0 1-.8-1.7c.44-1.33 1.37-4.11 1.81-5.44.22-.67.96-1.02 1.62-.77l14.53 5.58c.68.26 1.04 1.01.81 1.7z" id="g"/>
<path d="M259.43 179.58c-.91.41-2.58 1.16-3.5 1.55a1 1 0 0 1-1.37-.62c-.91-2.8-3.25-10.14-4.16-12.95-.19-.62.1-1.28.69-1.54.92-.41 2.59-1.15 3.5-1.56.56-.24 1.2.04 1.38.62.91 2.81 3.25 10.16 4.16 12.96.19.61-.11 1.28-.7 1.54z" id="h"/>
<path d="M254.44 164.19c-.36 1.07-1.09 3.28-1.45 4.35-.18.53-.77.81-1.29.6-2.51-.96-9.08-3.48-11.58-4.44-.55-.21-.83-.8-.64-1.35.35-1.07 1.09-3.29 1.44-4.34.18-.54.77-.82 1.3-.62 2.5.97 9.07 3.48 11.58 4.46.54.19.82.79.64 1.34z" id="i"/>
<path d="M237.5 238.35c-10.09-8.2-9.08-28.86 2.26-46.12 11.32-17.26 28.73-24.61 38.81-16.42 10.09 8.2 9.08 28.87-2.25 46.12-11.34 17.26-28.73 24.61-38.82 16.42z" id="j"/>
<path d="M268.55 175.57c-1.13.51-3.24 1.44-4.38 1.95-.69.3-1.5-.05-1.73-.78-1.13-3.52-4.08-12.72-5.2-16.26-.25-.76.12-1.6.87-1.92 1.13-.51 3.24-1.45 4.38-1.95.69-.31 1.5.05 1.73.78 1.13 3.52 4.08 12.73 5.2 16.25.25.77-.13 1.6-.87 1.93z" id="k"/>
<path d="M247.35 234.76c-5.23-4-2.62-18.27 5.81-31.88 8.44-13.59 19.53-21.4 24.75-17.4 5.24 3.98 2.63 18.26-5.81 31.86-8.43 13.61-19.52 21.4-24.75 17.42z" id="l"/>
<path d="M248.97 218.74c-1.11-.9 2.26-8.12 7.51-16.1 5.25-7.98 10.41-13.73 11.51-12.83 1.12.9-2.25 8.11-7.5 16.09s-10.41 13.74-11.52 12.84z" id="m"/>
<linearGradient xlink:href="#a" id="n" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.09084 0 0 1 -28.066 14)"/>
<linearGradient xlink:href="#a" id="c" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72767 -.38085 .34914 .66708 10.105 193.084)"/>
</defs>
<g transform="translate(-177.91 -74.04)">
<use xlink:href="#b" width="100%" height="100%" fill="#eaad22"/>
<use xlink:href="#b" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<path class="back-wing" d="M300.374 200.434s116.837-96.705 117.927-71.09c1.09 25.615-6.342 42.957-111.889 75.617z" fill="url(#c)" transform="translate(-177.91 -88.04)"/>
<g transform="translate(-177.91 -88.04)">
<g transform="translate(0 14)">
<use xlink:href="#d" width="100%" height="100%" fill="#eaad22"/>
<use xlink:href="#d" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#e" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#e" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#f" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#f" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#g" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#g" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#h" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#h" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#i" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#i" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#j" width="100%" height="100%" fill="#ead822"/>
<use xlink:href="#j" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#k" width="100%" height="100%" fill="#383729"/>
<use xlink:href="#k" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#l" width="100%" height="100%" fill="#3e3904"/>
<use xlink:href="#l" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<g transform="translate(0 14)">
<use xlink:href="#m" width="100%" height="100%" fill="#fff"/>
<use xlink:href="#m" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
</g>
<path d="M336.576 240.154c4.009-.5-.136 5 1.328 6.432 1.4 1.37 9.97.116 7.93 2.627-2.134 2.628-10.78 3.916-15.078 6.175-4.108 2.158-8.267 7.628-12.097 8.105-4.008.5.137-5-1.328-6.432-1.4-1.37-9.97-.115-7.93-2.626 2.134-2.628 10.78-3.917 15.079-6.175 4.107-2.159 8.266-7.628 12.096-8.106z" fill="#463207"/>
<path d="M343.13 288.255c-2.381 5.955-6.17-4.324-9.066-3.485-2.768.803-7.628 13.69-9.247 8.793-1.695-5.125 3.178-18.145 3.57-25.956.375-7.465-3.366-17.74-1.09-23.43 2.382-5.956 6.17 4.324 9.066 3.484 2.768-.802 7.628-13.69 9.247-8.793 1.695 5.125-3.177 18.145-3.57 25.957-.375 7.464 3.366 17.74 1.09 23.43z" fill="#463207"/>
<ellipse cx="332.615" cy="297.798" rx="7.196" ry="21.188" fill="#463207"/>
<path d="M341.673 329.106c.457 2.686-2.767-2.585-3.492-2.412-.693.166.387 6.002-1.092 3.506-1.548-2.612-2.65-8.512-4.092-12.255-1.377-3.576-4.586-8.84-5.023-11.408-.457-2.686 2.768 2.585 3.493 2.412.693-.166-.387-6.002 1.092-3.506 1.548 2.612 2.65 8.512 4.091 12.254 1.378 3.577 4.587 8.842 5.023 11.409z" fill="#463207"/>
<ellipse cx="351.115" cy="128.439" rx="8.237" ry="25.267" transform="matrix(.91978 .39243 -.35584 .93455 0 0)" fill="#463207"/>
<path d="M254.936 313.666c-1.91-.697 1.976-11.42 2.96-16.422.984-5 .702-12.594 3.596-16.898 2.893-4.304 4.709 1.01 6.618 1.707 1.91.697 7.09-2.064 6.107 2.937-.984 5.001-6.686 10.41-9.58 14.715-2.893 4.304-7.791 14.658-9.701 13.961z" fill="#463207"/>
<path d="M237.744 319.857c-2.685.462 2.58-2.772 2.405-3.497-.166-.693-6.001.398-3.508-1.086 2.61-1.553 8.507-2.665 12.248-4.114 3.574-1.384 8.832-4.603 11.398-5.044 2.686-.462-2.58 2.772-2.405 3.497.167.693 6.002-.398 3.508 1.086-2.609 1.552-8.506 2.665-12.247 4.114-3.574 1.384-8.833 4.602-11.399 5.044zM288.076 232.159c-4.008-.5.137 5-1.328 6.432-1.399 1.369-9.97.115-7.93 2.626 2.134 2.628 10.78 3.916 15.079 6.175 4.107 2.159 8.266 7.628 12.097 8.106 4.008.5-.137-5 1.327-6.433 1.4-1.369 9.97-.115 7.93-2.626-2.134-2.628-10.78-3.916-15.078-6.175-4.108-2.158-8.267-7.628-12.097-8.105zM363.99 244.882c3.917.986-1.938 4.61-1.092 6.477.809 1.783 9.252 3.717 6.442 5.32-2.941 1.676-11.467-.254-16.292.295-4.61.525-10.467 4.118-14.21 3.176-3.918-.986 1.937-4.61 1.09-6.477-.808-1.783-9.251-3.717-6.44-5.32 2.94-1.676 11.466.254 16.29-.295 4.611-.525 10.468-4.118 14.212-3.176z" fill="#463207"/>
<path d="M370.502 303.896c-2.736 7.294-7.087-5.296-10.415-4.268-3.18.983-8.761 16.767-10.622 10.77-1.947-6.277 3.65-22.224 4.101-31.792.43-9.143-3.866-21.727-1.252-28.697 2.736-7.294 7.087 5.296 10.415 4.268 3.18-.983 8.761-16.767 10.622-10.77 1.947 6.277-3.65 22.224-4.101 31.792-.43 9.143 3.866 21.727 1.252 28.697z" fill="#463207"/>
<ellipse cx="238.882" cy="419.961" rx="7.196" ry="21.188" transform="rotate(-19.343)" fill="#463207"/>
<path d="M383.416 343.67c1.321 2.383-3.467-1.522-4.094-1.119-.599.386 2.353 5.536.13 3.67-2.325-1.952-5.319-7.153-7.919-10.207-2.484-2.919-7.256-6.823-8.518-9.1-1.32-2.384 3.467 1.521 4.094 1.118.6-.386-2.353-5.535-.13-3.67 2.325 1.952 5.319 7.154 7.919 10.208 2.485 2.918 7.256 6.823 8.518 9.1z" fill="#463207"/>
<path d="M415.769 310.79l-13.793-6.396s7.362-1.287 18.773-11.637c11.41-10.35 9.612-31.539 9.612-31.539s5.235 7.62 6.815 11.805c1.58 4.187-2.141 18.253-6.19 23.1-5.438 5.887-8.08 10.368-15.217 14.668zM388.927 298.598l-16.93-9.215s10.423-1.573 26.58-14.218c16.155-12.646 13.608-38.533 13.608-38.533s7.813 8.509 9.85 12.224c2.236 5.115-3.232 24.5-8.964 30.422-7.7 7.193-14.04 14.066-24.144 19.32z" fill="#2d2d2d"/>
</g>
<path class="front-wing" d="M308.975 201.42s197.045-41.837 182.552-11.024c-14.493 30.812-33.92 46.643-178.235 20.07z" fill="url(#n)" transform="translate(-177.91 -88.04)"/>
</svg>
</div>

Related

Problem While animating an svg point using tranform translate X

I'm trying to make a simple animation using translate X on a segment of my svg (while hover on the element). This is my code:
<html>
<style>
.big-dot:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style>
<body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>
</html>
While hovering, the dot is doing a move on the Y axis instead and disappear. How Shall i tackle this? Also, is there a way I could use gsap to animate this considering this svg is inside a css class on a backround image ? Thanks

the issue you're having is that you've selected the wrong element, please select the circle itself, not the group it belongs to, your element is named #Path_277.
<style>
#Path_277:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style>
<body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>

Creating a preloading screen with a percentage and svgs

I'm currently working on a project in which I have to build a loading screen that includes a percentage and custom-made svgs animating. I've looked all over the internet but can't find anything that seems to be what I need? I can't seem to even get a simple loading bar to work!
I included what I currently have below. I've been using this walkthrough for progressbar.js since it includes animation and percentages, but any guidance would be much appreciated!
(My idea was for the pumpkin seeds to rotate around each other as the bar loads, then join together and have the pumpkin pop up once the bar hits 100%)
var ProgressBar = required('progressbar.js')
var line = new ProgressBar.Line('#container');
var bar = new ProgressBar.Line('#container', {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#92D4CE',
trailColor: '#78BA43',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#92D4CE'},
to: {color: '#78BA43'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1.0); // Number from 0.0 to 1.0
body{
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}
}
<body>
<div id="container"></div>
<div id="animated">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<style>
.st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
</style>
<g id="seeds">
<g id="seedThree">
<path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
</g>
<g id="seedTwo">
<path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
</g>
<g id="seedOne">
<path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
<path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
</g>
</g>
<g id="pumpkin">
<path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
<path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
<path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
<path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
<path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
<circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
<path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
</g>
</svg>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="js/progressbar.js/dist/progressbar.js"></script>
<script src="js/scripts.js"></script>
</body>

I'm not familiar with progressbar.js, so I can't really help you with that so much.
However this is pretty simple to do with CSS animations and transitions. Combined with a trivial amount of Javascript.
For the purposes of demonstrating setting an increasing amount of progress, I am using a simple requestAnimationFrame() animation loop.
Documentation for how the rest of it works is in the code.
var mysvg = document.querySelector("#animated svg");
//
// Call this function to set the amount of progress (0 .. 1)
//
function setProgress(progress)
{
// For debug purposes only: show the progress amount in a div so we can see the progress
document.getElementById("test").textContent = progress.toFixed(2);
// When progress is complete (1) start the pumpkin animation by adding a class to the SVG
if (progress >= 1) {
mysvg.classList.add("show-pumpkin");
} else {
mysvg.classList.remove("show-pumpkin");
}
}
// Set the initial state of the progress to 0
setProgress(0);
// Everything else below is just to simulate you calling setProgress() with an increasing value.
//
// A little animation that increments the progress amount for us.
// In a real situation you would be setting this yourself based on how much of your initialisation is complete etc.
//
var amt = 0;
function incrementPogress() {
amt += 0.005;
setProgress(amt);
if (amt <= 1)
window.requestAnimationFrame(incrementPogress);
}
// Start our progress incrementing simulation
window.requestAnimationFrame(incrementPogress);
svg {
width: 500px;
}
/* pumkin starts out very small and invisible */
#pumpkin {
transform-box: fill-box;
transform-origin: 50% 50%;
transform: scale(0.0001);
opacity: 0;
}
/* When the "show-pumkin" class is added to the SVG, wait 0.5s, then
make the pumkin visible, and scale it up with a bounce easing function. */
.show-pumpkin #pumpkin {
opacity: 1;
transition: transform 0.5s;
transition-delay: 0.45s;
transform: scale(1);
transition-timing-function: cubic-bezier(0.550, 1.650, 0.615, 0.840);
}
/* The group of seeds rotates constantly */
#seeds {
transform-origin: 72px 72px;
animation: rotate-clockwise 2s linear infinite;
}
/* The individual seeds have their own rotations.
With varying durations and directions. */
#seeds g {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: rotate-clockwise 1.8s linear infinite;
animation-direction: reverse;
}
#seeds #seedTwo {
animation-direction: normal;
animation-duration: 10s;
}
#seeds #seedThree {
animation-duration: 1s;
}
/* Keyframe definition to cause a 360 degree rotation.
Used for the group and individual seed rotations. */
#keyframes rotate-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* When the "show-pumkin" class is added to the SVG, start shrinking the seeds
towards the centre of the SVG. We apply this transform to a new "seed-container"
group so that it doesn't interfere with the rotation transform that's already
happening to "#seeds". */
.show-pumpkin #seeds-container {
transform-origin: 72px 72px;
transition: transform 0.5s;
transform: scale(0.1);
transition-timing-function: ease-out;
}
<div id="animated">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<style>
.st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
</style>
<g id="seeds-container">
<g id="seeds">
<g id="seedThree">
<path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
</g>
<g id="seedTwo">
<path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
</g>
<g id="seedOne">
<path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
<path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
</g>
</g>
</g>
<g id="pumpkin">
<path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
<path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
<path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
<path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
<path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
<circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
<path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
</g>
</svg>
</div>
<div id="test"></div>

SVG Animation works in Chrome, but doesn't in Firefox and other browsers

Okay, so I have an SVG that is basically a clock animation. It works as intended in Chrome when I'm testing it, but loses form when I try it in Firefox or Safari.
This is the SVG in question:
<svg id="svg" width="100%" viewBox="-400 -150 800 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<defs>
<path id="sec" d="M0,-140A140,140 0 0,1 0,140A140,140 0 0,1 0,-140" stroke-dasharray="880" stroke-dashoffset="-880.1"
fill="none">
<animate id="second" attributeName="stroke-dashoffset" dur="1s" repeatCount="60" begin="0s;second.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;-14.66" keyTimes="0;1" keySplines="0.42 0.0 0.58 1.0" />
</path>
<path id="min" d="M0,-130A130,130 0 0,1 0,130A130,130 0 0,1 0,-130" stroke-dasharray="817" stroke-dashoffset="-817.1"
fill="none">
<animate id="minute" attributeName="stroke-dashoffset" dur="60s" repeatCount="60" begin="0s;minute.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;0;-13.613" keyTimes="0;0.9833;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
</path>
<path id="hr" d="M0,-120A120,120 0 0,1 0,120A120,120 0 0,1 0,-120" stroke-dasharray="754" stroke-dashoffset="-754.1"
fill="none">
<animate id="hour" attributeName="stroke-dashoffset" dur="3600s" repeatCount="12" begin="0s;hour.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;0;-62.83" keyTimes="0;0.9997222;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
</path>
<mask id="mask" maskUnits="userSpaceOnUse" x="-150" y="-150" width="300" height="300">
<g stroke-width="10" stroke-linecap="round" stroke="white">
<use xlink:href="#sec" x="0" y="0" />
<use xlink:href="#min" x="0" y="0" />
<use xlink:href="#hr" x="0" y="0" />
</g>
</mask>
</defs>
<g stroke-width="7" stroke-linecap="round" mask="url(#mask)">
<g stroke="hsla(0, 95%, 25%, 1)">
<use xlink:href="#sec" />
</g>
<g stroke="hsla(188, 15%, 35%, 1)">
<use xlink:href="#min" />
</g>
<g stroke="hsla(218, 5%, 15%, 1)">
<use xlink:href="#hr" />
</g>
</g>
</svg>
<script>
window.onload = function () {
var now = new Date();
var h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
var curr = h * 60 * 60 + m * 60 + s;
svg.setCurrentTime(curr);
};
</script>
The second hand moves to the next position all the way from the top instead of animating from the previous place. You can test this yourself. This is the link to the code hosted on codepen.

Hover styling and transitions not applying properly to appended elements in Firefox

I have an SVG which I'm using as a sort of interactive floor plan. When you hover over the different areas of the floor plan (<g> elements), they expand and float above the other areas. The scaling of the element is triggered by CSS, however for the hovered area to appear above the other areas I use jQuery to append the element to the bottom of the SVG.
This works fine in Chrome, but not in Firefox. Can you help?
The code actually exceeds the character limit for the question, so I can't add a snippet, but I'm made a pen here for you to look at.
Here are the important bits of the code:
CSS:
g.hoverFX {
transition: transform 0.3s linear;
transform-origin: 50% 50%;
transform: scale(1);
}
g.hoverFX:hover {
filter: url(#shadow);
transform: scale(1.1);
}
JS:
jQuery(function(){
jQuery('g.hoverFX').hover(function(e){
jQuery(this).appendTo('svg#Layer_2');
});
});
HTML:
<g class="hoverFX" id="Conference_1_">
<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>
<path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/>
</g>
<g class="hoverFX" id="Kitchen_1_">
<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>
<path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/>
</g>
<g class="hoverFX" id="Catering_Store_1_">
<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>
<path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/>
</g>
<g class="hoverFX" id="Clearance_Store_1_">
<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>
<path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/>
</g>
<g class="hoverFX" id="Showroom_1_">
<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7
1262.6,783 "/>
<path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6
M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/>
</g>
I've tried to find some answers online, but the most useful thing I found was this previous question, which I think is a step in the right direction, so hopefully it helps.

The cause is just as described in the link you posted. Moving elements around in the DOM will prevent Firefox processing hover events properly.
One solution is to tie your animation to a class instead of a hover event. Then and remove that class on hover.
jQuery(function(){
jQuery('g.hoverFX').hover(function(e){
jQuery(this).addClass("hovering").appendTo('svg#Layer_2');
},function(e){
jQuery(this).removeClass("hovering");
});
});
.st4{fill:#EEEEEE;}
.st19{fill:#1B998B;}
.st20{fill:#87BCDE;}
.st21{fill:#D7263D;}
.st22{fill:#042E6F;}
.st48{fill:#7f3d82;}
g.hoverFX {
transition: transform 0.3s linear;
transform-origin: 50% 50%;
transform: scale(1);
}
g.hoverFX.hovering {
filter: url(#shadow);
transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="interactive-wrapper" style="transform: translate(40%,0%);position:absolute;width: 50vw;">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2061.2 1110.7" style="enable-background:new 0 0 2061.2 1110.7;width: 50vw;" xml:space="preserve">
<defs>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="5"/>
</filter>
</defs>
<g class="hoverFX" id="Conference_1_">
<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>
<path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/>
</g>
<g class="hoverFX" id="Kitchen_1_">
<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>
<path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/>
</g>
<g class="hoverFX" id="Catering_Store_1_">
<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>
<path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/>
</g>
<g class="hoverFX" id="Clearance_Store_1_">
<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>
<path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/>
</g>
<g class="hoverFX" id="Showroom_1_">
<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7
1262.6,783 "/>
<path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6
M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/>
</g>
</svg>
</div>

SVG: transition , animation and then another transition doesn't work

My goal here is to animate a rocket in my website.
It first take off then it moves a little bit on the spot on the top of the svg and then it take off for good, further. The two first steps are working well but the last one doesn't work. Maybe that's because i already assigned a transition at first to it. I achieve the first step by doing so:
$("#rocket", svgDoc).css({transform:"translateY(-720px)",transition:"6s"});
Then the second one is on the style part of svg file :
#rocket{
animation: fly 1s infinite alternate;
animation-delay: 6s;
}
#-webkit-keyframes fly {
100% {
transform : translateY(-10px);
}
}
#keyframes fly {
100% {
transform : translateY(-10px);
}
}
Then the third one , i tried it by attribute it a new class but the transition doesn't work. the translate part works good but not the animation:
.byebye{
transform : translateY(-400px);
transition : transform 2s;
}
Any thoughts ?
Here is a jsFiddle:
https://jsfiddle.net/yptn6ovd/1/

suggest decouple animate phrases, maybe svg tag better
still i made it work, rocket not showing in last phrase is a browser bug, need a time gap to fix it
jsfiddle
var svgDoc = $("#fusee")[0].contentDocument; // Get the document object for the SVG
$("#all", svgDoc).css({transform:"translateY(-720px)",transition:"6s"});
var nuages = $("#nuages");
var fusee = $("#fusee");
$("#nuages").fadeIn(9000);
setTimeout(function(){
fusee.addClass('fly');
},6000);
setTimeout( function() {
fusee.removeClass('fly');
setTimeout(function(){
fusee.addClass("byebye");
},50);//.addClass("byebye");
$("#logo").fadeIn(3000);
$("#bottom").css({transform:"translateY(-180px)", transition: "2s"});
}, 10000);
.st0{fill:#BF534F;}
.st1{fill:#FFC843;}
.st2{fill:#0071CE;}
.st3{fill:#333E48;}
.st4{fill:#08153a;}
.st5{fill:#A4A9AD;}
.st6{clip-path:url(#SVGID_2_);}
.st7{clip-path:url(#SVGID_4_);fill:#F1F1F1;}
.st8{clip-path:url(#SVGID_4_);fill:#E5E5E5;}
.st9{clip-path:url(#SVGID_6_);}
.st10{clip-path:url(#SVGID_8_);fill:#F1F1F1;}
.st11{clip-path:url(#SVGID_8_);fill:#E5E5E5;}
.st12{fill:#FFF200;}
.st13{fill:#6E8DC8;}
.st14{fill:#ED1C24;}
.st15{fill:#FFFFFF;}
#fusee{
}
.fly{
animation: fly 1s infinite alternate;
}
.byebye{
transform : translateY(-400px);
transition : transform 2s;
}
#-webkit-keyframes fly {
100% {
transform : translateY(-10px);
}
}
#keyframes fly {
100% {
transform : translateY(-10px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="-385.9 -215.9 625.5 976" style="enable-background:new -385.9 -215.9 625.5 976;" xml:space="preserve">
<g id="all">
<g id="fusee">
<path class="st0" d="M-52.2,707.8c2.9,0,20.5-1,23.9,14.5c2.7,12.2,3.6,18.7,12.3,18.7s12.4-7.3,8.7-29.5
c-3-18.2-5.4-30.5-44.9-30.5L-52.2,707.8L-52.2,707.8z"/>
<path class="st0" d="M-98.9,707.8c-2.9,0-20.5-1-23.9,14.5c-2.7,12.2-3.6,18.7-12.3,18.7c-8.7,0-12.4-7.3-8.7-29.5
c3-18.2,5.4-30.5,44.9-30.5V707.8z"/>
<g>
<path class="st1" d="M-53.5,721.3c0-12.2-9.9-22.1-22.1-22.1s-22.1,9.9-22.1,22.1s9.9,38.8,22.1,38.8
C-63.4,760.1-53.5,733.5-53.5,721.3z"/>
<path class="st0" d="M-64.8,720.7c0-6-4.8-10.8-10.8-10.8s-10.8,4.8-10.8,10.8c0,6,4.8,19,10.8,19
C-69.6,739.6-64.8,726.6-64.8,720.7z"/>
</g>
<path class="st2" d="M-45.1,713.8c7.6-28.7,14-77.5,14-97.6s-14.6-72-44.5-97.6c-29.9,25.6-44.5,77.5-44.5,97.6s6.5,68.9,14,97.6
H-45.1L-45.1,713.8z"/>
<path class="st3" d="M-111.1,690.9c1.6,8.3,3.3,16.1,5.1,22.8h60.9c1.8-6.7,3.5-14.5,5.1-22.8H-111.1z"/>
<path class="st0" d="M-75.6,518.6c-9.9,8.5-18.2,19.9-24.8,32.1h49.5C-57.4,538.5-65.6,527.1-75.6,518.6z"/>
<g>
<path class="st15" d="M-64.9,639.7c0-11.6,14.6-14.8,14.6-34.1c0-14-11.3-25.3-25.3-25.3s-25.3,11.3-25.3,25.3
c0,19.3,14.6,22.5,14.6,34.1H-64.9z"/>
<path class="st5" d="M-87.6,644.1c0,6.7,5.4,12.1,12.1,12.1c6.7,0,12.1-5.4,12.1-12.1H-87.6z"/>
<path class="st3" d="M-61.3,643c0-1.9-1.5-3.4-3.4-3.4h-21.8c-1.9,0-3.4,1.5-3.4,3.4v4.7c0,1.9,1.5,3.4,3.4,3.4h21.8
c1.9,0,3.4-1.5,3.4-3.4L-61.3,643L-61.3,643z"/>
</g>
</g>
<g id="bottom">
<g id="nuages" style="display:none;">
<g>
<defs>
<polygon id="SVGID_1_" points="-389.2,1587 235.6,1582.4 230,1139.4 -394.7,1144 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st6">
<defs>
<polygon id="SVGID_3_" points="-389.2,1587 235.6,1582.4 230,1139.4 -394.7,1144 "/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<path class="st7" d="M-119.2,1580l0.7,5l-0.5-5.1C-119,1580-119.1,1580-119.2,1580z"/>
<path class="st7" d="M-110.3,1565.2l0.4,3.5l-0.3-4C-110.2,1564.9-110.3,1565.1-110.3,1565.2z"/>
<path class="st7" d="M-69.3,1514.8l0.1,9.9l0.2-10.2C-69.1,1514.6-69.2,1514.7-69.3,1514.8z"/>
<path class="st7" d="M-77.7,1523.2l0.2,7.2l0-7.4C-77.5,1523.1-77.6,1523.2-77.7,1523.2z"/>
<path class="st7" d="M-16,1395.6c-0.4-0.1-0.8-0.1-1.2-0.3l0,0.2c0.4,1.3,0.7,2.7,1,4C-16.2,1398.2-16.1,1396.9-16,1395.6z"/>
<path class="st7" d="M123.2,1184c-4,0-7.6,1.8-10.7,4.8c-26.5-15.3-98.4-25.9-182.8-25.3c-93.7,0.7-171.6,14.9-189.1,33.3
c-2.3-0.7-4.8-1.1-7.3-1c-17.4,0.1-31.2,18.5-30.9,41.1c0.3,22.6,14.6,40.8,32,40.7c7.5-0.1,14.3-3.5,19.7-9.3
c3.2,7.5,8.3,12.8,14.2,14.3c3.9,27.7,20.3,48.5,39.7,48.3c0.9,0,1.9-0.1,2.8-0.2c4,35.8,22.4,64.3,45.8,71.6l0.4,3.2
c5.2-2.5,14.2-1.8,20.8-1.2c0.3-0.1,0.6-0.2,0.9-0.2l-0.1-1.2c16.3-4.4,30.1-19.2,38.4-39.7c0.3,0.2,0.7,0.3,1,0.5l0.1,3.2
c0.2-0.1,0.4-0.2,0.6-0.3c1.4-0.6,2.8-1,4.2-1.2l0-0.2c0.3,0,0.6,0.1,0.9,0.1c1.3-0.2,2.5-0.1,3.6,0c0.3,0,0.6-0.1,0.8-0.1
c0.7-0.6,1.7-1.1,3-1.3c1.2-0.2,2.3-0.3,3.4-0.4l0-0.6c8-4.6,14-15.2,15.8-28.2c4.4,3.7,9.5,5.8,14.9,5.7
c2.4,0,4.8-0.5,7.1-1.3l0,0.8c0.3-0.2,0.7-0.4,1.1-0.6c1.6-0.8,3.7-0.8,5.5-0.3c0.5-0.9,1.5-1.7,2.7-2.2l0.3-4
c1.8-1.9,3.5-4.1,5.1-6.5l-0.6,9.8c0.7,0.1,1.3,0.3,2,0.5c3,1.3,5.2,3.3,6.7,5.7l0.4-4.1c8,16.1,20.8,26.5,35.1,26.4
c23.8-0.2,42.8-29.4,42.3-65.3c-0.1-8.3-1.3-16.3-3.2-23.6c4.2,3.3,8.9,5.1,13.9,5.1c15.8-0.1,28.4-18.9,28.8-42.3
c3.3,3.6,7.4,5.6,11.7,5.6c11-0.1,19.7-13.6,19.5-30.1C143.3,1197.2,134.2,1183.9,123.2,1184z M-159.1,1239.7
c-0.1-0.3-0.2-0.5-0.3-0.8c0.4,0,0.8,0.1,1.1,0.1C-158.6,1239.3-158.9,1239.5-159.1,1239.7z"/>
<path class="st7" d="M-28.3,1578.4l-0.4,5.9l0.6-6.1C-28.2,1578.3-28.2,1578.4-28.3,1578.4z"/>
<path class="st8" d="M-339.5,1143.6l510.6-3.7c2.5,5.5,3.9,11.5,4,17.9c0.3,25.5-21.1,46.3-47.8,46.5c-4.5,0-8.8-0.5-13-1.6
c-2.7,25.3-16.9,44.7-34.3,44.8c-2.2,0-4.3-0.3-6.3-0.8c-7.5,25.3-25.3,43.2-46.3,43.3c-17.9,0.1-33.7-12.6-43.1-31.9
c-4.4,4.5-9.7,7.1-15.5,7.2c-11.4,0.1-21.3-9.9-25.7-24.3c-13.6,22.4-34.3,36.7-57.7,36.8c-29.1,0.2-54.6-21.6-67.7-53.7
c-4.8,4.8-10.4,7.5-16.4,7.6c-9.2,0.1-17.5-6.1-23.4-16.1c-10.6,16.3-28.3,27.1-48.3,27.2c-33,0.2-60.1-28.2-60.6-63.5
c-0.1-7.7,1.1-15.1,3.3-21.9C-333.2,1153.3-337.2,1148.7-339.5,1143.6"/>
</g>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-391.9" y="708.1" width="624.8" height="443"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
<g class="st9">
<defs>
<rect id="SVGID_7_" x="-391.9" y="708.1" width="624.8" height="443"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
<path class="st10" d="M125.5,1047.4c-4.4,0-8.4,2.1-11.7,5.7c-0.7-23.5-13.6-42.1-29.4-42.1c-5,0-9.7,1.9-13.8,5.2
c1.9-7.3,2.9-15.3,2.9-23.6c0-35.9-19.3-65-43.1-65c-14.3,0-27,10.5-34.8,26.6l-27.1-246.1l18.8,258.1
c-1.6-2.4-3.3-4.6-5.2-6.4l-22.4-235.5l12.8,229.2c-2.3-0.8-4.6-1.3-7.1-1.3c-5.4,0-10.4,2.1-14.8,5.8
c-1.9-12.9-8-23.5-16.1-28l-5.9-162l1,160.1c-1.4-0.3-2.8-0.5-4.2-0.5c-0.9,0-1.8,0.1-2.7,0.2l-2.4-165.4L-82,929.3
c-0.3,0.2-0.7,0.3-1,0.5c-8.5-20.4-22.5-35.1-38.9-39.4l9.4-166.1L-130,889.2c-0.6,0-1.2,0-1.8,0c-1.2,0-2.3,0.1-3.5,0.2
l14.1-181.2L-143.9,891c-23.3,7.5-41.3,36.1-44.9,71.9c-0.9-0.1-1.9-0.2-2.8-0.2c-19.4,0-35.5,20.9-39.1,48.6
c-5.8,1.5-10.9,6.9-14,14.4c-5.4-5.7-12.3-9.1-19.8-9.1c-17.4,0-31.4,18.3-31.4,40.9c0,22.6,14.1,40.9,31.4,40.9
c2.5,0,4.9-0.4,7.2-1.1c17.7,18.2,95.8,31.9,189.5,31.9c84.4,0,156.2-11.1,182.5-26.6c3.1,3,6.8,4.7,10.7,4.7
c11,0,19.9-13.4,19.9-30C145.4,1060.9,136.5,1047.4,125.5,1047.4 M-157.9,1054.4c0.1-0.3,0.2-0.5,0.3-0.8
c0.3,0.2,0.5,0.4,0.8,0.6C-157.1,1054.4-157.5,1054.4-157.9,1054.4"/>
<path class="st11" d="M-336.8,1151.1h510.6c2.4-5.5,3.8-11.6,3.8-17.9c0-25.5-21.7-46.2-48.4-46.2c-4.5,0-8.8,0.6-12.9,1.7
c-3-25.3-17.5-44.5-34.9-44.5c-2.2,0-4.3,0.3-6.3,0.9c-7.8-25.3-25.9-43-46.9-43c-17.9,0-33.6,12.8-42.7,32.2
c-4.4-4.5-9.8-7.1-15.6-7.1c-11.4,0-21.2,10.1-25.4,24.5c-13.9-22.3-34.8-36.4-58.1-36.4c-29.1,0-54.4,22-67.1,54.2
c-4.8-4.7-10.5-7.4-16.5-7.4c-9.2,0-17.4,6.2-23.2,16.2c-10.8-16.2-28.6-26.9-48.7-26.9c-33,0-59.8,28.6-59.8,64
c0,7.7,1.3,15,3.6,21.9C-330.6,1141.3-334.5,1146-336.8,1151.1"/>
</g>
</g>
</g>
<g id="logo" style="display:none">
<g>
<polygon class="st4" points="-256,1116.5 -247.7,1098.8 -257.7,1098.8 -267.7,1098.8 -259.4,1116.5 -270.7,1165.5 -257.7,1207
-244.7,1165.5 "/>
<g>
<path class="st12" d="M-226.2,1214.1c14,0,18.2-3.3,18.2-11.6v-32.7c0-10.1,0.3-13.6,9.4-18.7c-7.8-4.4-9.4-9.2-9.4-18.5v-32.9
c0-8.3-4.3-11.6-18.2-11.6v-6.8c0,0,8.9,0,11.6,0.4c11.8,1.5,14.5,11.1,14.5,21.4v29.7c0,6.7,0.2,10,7.2,14.6l5.4,3.7l-5.3,2.5
c-9,4.4-7.2,10.2-7.2,16.9v28.5c0,10.3-2.6,19.9-14.5,21.4c-2.6,0.4-11.6,0.4-11.6,0.4V1214.1z"/>
<path class="st13" d="M-226.2,1214.1c14,0,18.2-3.3,18.2-11.6v-32.7c0-10.1,0.3-13.6,9.4-18.7c-7.8-4.4-9.4-9.2-9.4-18.5v-32.9
c0-8.3-4.3-11.6-18.2-11.6v-6.8c0,0,8.9,0,11.6,0.4c11.8,1.5,14.5,11.1,14.5,21.4v29.7c0,6.7,0.2,10,7.2,14.6l5.4,3.7l-5.3,2.5
c-9,4.4-7.2,10.2-7.2,16.9v28.5c0,10.3-2.6,19.9-14.5,21.4c-2.6,0.4-11.6,0.4-11.6,0.4V1214.1z"/>
<path class="st14" d="M-289.2,1220.9c0,0-8.9,0-11.6-0.4c-11.8-1.5-14.5-11.1-14.5-21.4v-28.5c0-6.8,1.8-12.5-7.2-16.9
l-5.3-2.5l5.4-3.7c7-4.7,7.2-8,7.2-14.6v-29.7c0-10.3,2.6-19.9,14.5-21.4c2.6-0.4,11.6-0.4,11.6-0.4v6.8
c-14,0-18.2,3.3-18.2,11.6v32.9c0,9.3-1.6,14.1-9.4,18.5c9.2,5.2,9.4,8.7,9.4,18.7v32.7c0,8.3,4.3,11.6,18.2,11.6V1220.9z"/>
<path class="st13" d="M-289.2,1220.9c0,0-8.9,0-11.6-0.4c-11.8-1.5-14.5-11.1-14.5-21.4v-28.5c0-6.8,1.8-12.5-7.2-16.9
l-5.3-2.5l5.4-3.7c7-4.7,7.2-8,7.2-14.6v-29.7c0-10.3,2.6-19.9,14.5-21.4c2.6-0.4,11.6-0.4,11.6-0.4v6.8
c-14,0-18.2,3.3-18.2,11.6v32.9c0,9.3-1.6,14.1-9.4,18.5c9.2,5.2,9.4,8.7,9.4,18.7v32.7c0,8.3,4.3,11.6,18.2,11.6V1220.9z"/>
<path class="st4" d="M-136.2,1138.5v4c-2.1-1.8-4.5-2.7-7.4-2.7c-3.1,0-5.7,1.1-7.8,3.4c-2.1,2.2-3.2,4.9-3.2,8.1
c0,3.1,1.1,5.7,3.2,8c2.1,2.2,4.7,3.4,7.8,3.4c2.8,0,5.3-1,7.4-2.9v4.1c-2.2,1.3-4.7,2-7.3,2c-4,0-7.4-1.4-10.3-4.2
c-2.9-2.8-4.3-6.2-4.3-10.2c0-4.1,1.4-7.6,4.3-10.4c2.9-2.8,6.4-4.3,10.5-4.3C-140.6,1136.6-138.3,1137.3-136.2,1138.5"/>
<path class="st4" d="M-122.3,1140.9c2.9-2.9,6.3-4.3,10.3-4.3c4,0,7.4,1.4,10.3,4.3c2.9,2.9,4.3,6.3,4.3,10.3
c0,4.1-1.4,7.6-4.3,10.4c-2.8,2.8-6.3,4.2-10.4,4.2s-7.5-1.4-10.4-4.2c-2.8-2.8-4.3-6.2-4.3-10.4
C-126.6,1147.2-125.2,1143.8-122.3,1140.9 M-119.8,1159.2c2.2,2.2,4.8,3.3,7.9,3.3c3,0,5.7-1.1,7.9-3.3c2.2-2.2,3.3-4.9,3.3-8
c0-3.1-1.1-5.8-3.2-8c-2.1-2.2-4.8-3.3-8-3.3c-3.2,0-5.9,1.1-8,3.3c-2.1,2.2-3.2,4.9-3.2,8
C-123.1,1154.4-122,1157-119.8,1159.2"/>
<path class="st4" d="M-86.8,1165.2v-27.9h5.8c4.5,0,8.3,1.2,11.2,3.6c3,2.4,4.4,5.8,4.4,10.2c0,4.6-1.5,8.1-4.4,10.5
c-2.9,2.4-6.7,3.6-11.4,3.6H-86.8z M-83.4,1140.4v21.6h1.2c1.9,0,3.6-0.2,5.1-0.6c1.5-0.4,2.9-1,4.2-1.8
c1.2-0.8,2.2-1.9,2.9-3.4c0.7-1.4,1.1-3.1,1.1-5.1c0-2-0.4-3.7-1.1-5.1c-0.7-1.4-1.7-2.6-2.9-3.4c-1.3-0.8-2.6-1.4-4.2-1.8
c-1.5-0.4-3.2-0.6-5.1-0.6H-83.4z"/>
<polygon class="st4" points="-54.5,1165.2 -54.5,1137.2 -39.5,1137.2 -39.5,1140.4 -51,1140.4 -51,1148.2 -39.8,1148.2
-39.8,1151.4 -51,1151.4 -51,1162 -39.5,1162 -39.5,1165.2 "/>
<rect x="-9.8" y="1137.2" class="st13" width="3.5" height="27.9"/>
<polygon class="st13" points="6,1165.2 6,1135.9 27,1157.9 27,1137.2 30.5,1137.2 30.5,1166.3 9.5,1144.3 9.5,1165.2 "/>
<path class="st13" d="M58,1140.9l-2.8,1.7c-1-1.8-2.5-2.6-4.5-2.6c-1.2,0-2.3,0.4-3.2,1.1c-1,0.7-1.4,1.7-1.4,2.9
c0,1.7,1.3,3,3.9,4l2,0.8c2.2,0.9,3.9,1.9,5.1,3.2c1.2,1.3,1.8,3,1.8,5.2c0,2.5-0.9,4.6-2.6,6.2c-1.7,1.6-3.8,2.5-6.4,2.5
c-2.2,0-4.2-0.7-5.8-2.2c-1.6-1.5-2.6-3.3-2.9-5.6l3.5-0.7c0,1.5,0.5,2.8,1.5,3.8c1,1,2.3,1.5,3.9,1.5c1.5,0,2.7-0.5,3.7-1.6
c1-1.1,1.5-2.4,1.5-3.8c0-1.4-0.4-2.4-1.3-3.2c-0.9-0.8-2-1.5-3.5-2.1l-1.9-0.8c-1.9-0.8-3.4-1.8-4.5-2.8
c-1.1-1.1-1.6-2.5-1.6-4.3c0-2.2,0.8-3.9,2.4-5.2c1.6-1.3,3.6-2,5.8-2C54,1136.6,56.4,1138,58,1140.9"/>
<rect x="70" y="1137.2" class="st13" width="3.5" height="27.9"/>
<path class="st13" d="M85.9,1165.2v-27.9h5.8c4.5,0,8.3,1.2,11.2,3.6c3,2.4,4.4,5.8,4.4,10.2c0,4.6-1.5,8.1-4.4,10.5
c-2.9,2.4-6.7,3.6-11.4,3.6H85.9z M89.3,1140.4v21.6h1.2c1.9,0,3.6-0.2,5.1-0.6c1.5-0.4,2.9-1,4.2-1.8c1.2-0.8,2.2-1.9,2.9-3.4
c0.7-1.4,1.1-3.1,1.1-5.1c0-2-0.4-3.7-1.1-5.1c-0.7-1.4-1.7-2.6-2.9-3.4c-1.3-0.8-2.6-1.4-4.2-1.8c-1.5-0.4-3.2-0.6-5.1-0.6
H89.3z"/>
<polygon class="st13" points="118.2,1165.2 118.2,1137.2 133.2,1137.2 133.2,1140.4 121.7,1140.4 121.7,1148.2 132.9,1148.2
132.9,1151.4 121.7,1151.4 121.7,1162 133.2,1162 133.2,1165.2 "/>
<path class="st13" d="M153.5,1153l8.8,12.2h-4.2l-8.2-11.8h-1.4v11.8h-3.5v-27.9h4.2c1.1,0,1.9,0,2.6,0.1
c0.7,0,1.4,0.2,2.4,0.4c0.9,0.2,1.7,0.5,2.4,0.9c1.1,0.7,2,1.6,2.7,2.8c0.7,1.2,1,2.5,1,3.9c0,2-0.6,3.8-1.9,5.2
C157.1,1151.9,155.5,1152.8,153.5,1153 M148.4,1140.3v10.1h1.1c1,0,1.9-0.1,2.7-0.2c0.8-0.1,1.5-0.4,2.3-0.7
c0.8-0.3,1.4-0.9,1.8-1.6c0.4-0.7,0.6-1.6,0.6-2.7c0-3.3-2.5-5-7.6-5H148.4z"/>
</g>
</g>
</g>
</g>
</g>
</svg>

Not getting the third part after watching the fiddle.. However, try
Put this inside a class
{transform:"translateY(-720px)",transition:"6s"}
and remove that class before adding byebye class to element.

Just remove animation:infinite looping from your #fusee. Even you can remove animation-direction:alternate as we don't want it to perform reverse action. Mainly animation loop was creating that issue.
#fusee{
animation: fly 1s;
animation-delay: 6s;
}

We Keep Coding

JavaScript is the programming language of the Web.

CSS animate while dynamically changing translation - javascript

Related

Problem While animating an svg point using tranform translate X

Creating a preloading screen with a percentage and svgs

SVG Animation works in Chrome, but doesn't in Firefox and other browsers

Hover styling and transitions not applying properly to appended elements in Firefox

SVG: transition , animation and then another transition doesn't work

Categories

Resources