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

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>

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>

How can I make a toggle to toggle the visibility of an inline SVG?

I'm making a website where you can create your own character in order to learn more about SVGs. I want the user to be able to select different poses.
I was wondering how I could toggle the visibility of an SVG on the website to make one disappear and another appear.
Here is my SVG code:
<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 720 720" style="enable-background:new 0 0 720 720;" xml:space="preserve">
<g id="skin">
<circle class="skin" cx="364.42" cy="383" r="278" />
</g>
<g id="mouth">
<path class="mouth" d="M172.92,383c127.67,0,255.33,0,383,0c0,105.05-86.45,191.5-191.5,191.5S172.92,488.05,172.92,383z"/>
</g>
<g id="hair">
<path class = "hair" d="M107.4,276.86c-2.76-50.59,10.76-81.24,24.2-100.13C189.57,95.31,331.92,112,341.92,57.91
c2.04-11.03-2.07-21.46-6.93-29.61c18.47-6.31,81.92-25.39,151.28,3.28c94.59,39.09,121.88,137.21,127.56,160.84
c7.93,32.98,7.18,61.32,5.46,79.42c-38.79-64.73-78.17-85.57-107.42-92.42c-43.32-10.15-60.72,11.26-139.64,11.71
c-67.77,0.39-78.13-15.27-119.49-10.14C216.75,185.45,165.19,204.69,107.4,276.86z"/>
</g>
<g id="eyes">
<g>
<circle class = "eyes" cx="251.17" cy="271.25" r="52.4"/>
<circle class = "eyes" cx="477.67" cy="271.25" r="52.4"/>
</g>
</g>
<g id="clothing">
<rect x="236.92" y="644.4" width="255" height="180"/>
</g>
<g id="tie">
<rect class="tie" x="341.82" y="653.68" transform="matrix(0.7071 0.7071 -0.7071 0.7071 584.9371 -59.6038)" class="st0" width="45.2" height="45.2"/>
<path class="tie" d="M364.95,927.93c-6.29-12.71-12.59-25.42-18.88-38.13c3.44-63.19,6.89-126.39,10.33-189.58
c5.1,0.25,10.2,0.49,15.29,0.74c4.13,62.75,8.25,125.49,12.38,188.24C377.7,902.11,371.32,915.02,364.95,927.93z"/>
</g>
</svg>
The SVG is just a sample right now before I make the actual assets.

Svg circular slider color changing

I have following svg and i want to create a circular slider,
and the problem is i can't found anything related to changing
stroke color of part of image.
<svg width="221px" height="221px" viewBox="0 0 221 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<pattern id="pattern" width="100%" height="100%">
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<use xlink:href="#path-1"></use>
</mask>
</pattern>
<defs>
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="221" height="221" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Final" stroke="none" stroke-width="1" fill="url(#psattern)" fill-rule="evenodd" opacity="0.69921875" stroke-dasharray="1,4">
<g id="voor" transform="translate(-77.000000, -230.000000)" stroke="#F5A623" stroke-width="48">
<g id="fi-strokes" stroke-width="48">
<g id="Gup" transform="translate(0.000000, -44.000000)">
<g id="Gup-5" transform="translate(20.000000, 111.000000)">
<g id="rp-4">
<g id="und" transform="translate(57.000000, 163.000000)">
<g id="reen">
<g id="Dl">
<g id="faded-ts">
<use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
How to change part of image on mouse/touch events to another color?
I tried:
clip-path - i couldn't create smooth color changing.
linear-gradient - same problem
Any Tips?

Hide svg at start and still being animatable with animjs (opacity: 1) again

Let's take this simple svg as an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"
d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
In the beginning of my script when the doc has loaded, I find the element and hides it.
const loading_svg = document.getElementById('loading-svg');
// initialize server-svg as invisible
anime({
targets: [loading_svg],
opacity: 0
});
However, that resolves in some issues: See example
The goal
The goal is now to later have it appear when the user hover over something; therefor it is important to have it initialized as hidden to start off. Now, this is a bad approach, as it is first able to hide the svg when the document has loaded, which means that it is going to look something like this: (note that you can see the svg in a split second before it dissappearing) See example
What have I tried?
I have tried setting the opacity css attribute of the svg to 0. Then when the user has hovered over a specific item tried doing:
// initialize server-svg as invisible
anime({
targets: [loading_svg],
opacity: 1
});
However, that does not work.
I am not sure how animejs hides svg's whenever you set the opacity attribute to 0, but it doesn't seem like it sets the css opacity attribute of the svg to 0. This also explains why it animejs is unable to "unhide" the svg if its css opacity attribute is sat to 0.
Simplified fiddle demonstrating the issue:
anime({
targets: document.getElementsByTagName('svg'),
opacity: 1
});
svg {
opacity: 0
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"
d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>

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;
}

Categories