how to stop an svg css animation? - css

I have an SVG animation and I'm trying to figure out how to stop and leave the SVG in view right after the animation sequence is completed once. This way the logo stays on the page until the next page refresh etc.
here's the demo:
https://jsfiddle.net/u410bjyk/
html:
<svg class="pin" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" version="1.1">
<g class="pin__group">
<g class="pin__grayGroup">
<path class="pin__square" fill="none" stroke-width="1" d="M0,0 0,60 60,60 60,0z"/>
<path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M15,0 15,60"/>
<path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M30,0 30,60"/>
<path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M45,0 45,60"/>
<path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M0,45 60,45"/>
<path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M0,30 60,30"/>
<path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M0,15 60,15"/>
<path class="pin__circleBig" fill="none" stroke-width="1" d="M60,30 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>
<path class="pin__circleSmall" fill="none" stroke-width="1" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/>
</g>
<g class="pin__greenGroup">
<path class="pin__outer" stroke-width="2" d="M30,0 a30,30 0 0,1 30,30 L60,60 30,60 a30,30 0 0,1 0,-60"/>
<path class="pin__inner" stroke-width="2" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/>
</g>
</g>
</svg>
CSS:
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pin {
position: absolute;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -60px;
width: 120px;
height: 120px;
overflow: visible;
}
.pin__group {
-webkit-transform-origin: 30px 30px;
transform-origin: 30px 30px;
-webkit-animation: group-anim 8s 1s infinite;
animation: group-anim 8s 1s infinite;
}
.pin__grayGroup {
-webkit-animation: gray-anim 8s 1s infinite;
animation: gray-anim 8s 1s infinite;
}
.pin__square {
stroke: #B8B8B8;
stroke-dasharray: 240, 240;
stroke-dashoffset: 240;
-webkit-animation: square-anim 8s 1s infinite;
animation: square-anim 8s 1s infinite;
}
.pin__line {
stroke: #B8B8B8;
stroke-dasharray: 60, 60;
stroke-dashoffset: 60;
}
.pin__line-1 {
-webkit-animation: line-anim 8s 0.6s infinite;
animation: line-anim 8s 0.6s infinite;
}
.pin__line-2 {
-webkit-animation: line-anim 8s 0.8s infinite;
animation: line-anim 8s 0.8s infinite;
}
.pin__line-3 {
-webkit-animation: line-anim 8s 1s infinite;
animation: line-anim 8s 1s infinite;
}
.pin__circleBig {
stroke: #B8B8B8;
stroke-dasharray: 188.522, 188.522;
stroke-dashoffset: 188.522;
-webkit-animation: bigCircle-anim 8s 1s infinite;
animation: bigCircle-anim 8s 1s infinite;
}
.pin__circleSmall {
stroke: #B8B8B8;
stroke-dasharray: 94.261, 94.261;
stroke-dashoffset: 94.261;
-webkit-animation: smallCircle-anim 8s 1s infinite;
animation: smallCircle-anim 8s 1s infinite;
}
.pin__outer {
stroke: #00CD73;
fill: transparent;
stroke-dasharray: 201.391, 201.391;
stroke-dashoffset: 201.391;
-webkit-animation: outer-anim 8s 1s infinite;
animation: outer-anim 8s 1s infinite;
}
.pin__inner {
stroke: #00CD73;
fill: transparent;
stroke-dasharray: 94.261, 94.261;
stroke-dashoffset: 94.261;
-webkit-animation: inner-anim 8s 1s infinite;
animation: inner-anim 8s 1s infinite;
}
#-webkit-keyframes square-anim {
15% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes square-anim {
15% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes line-anim {
23% {
stroke-dashoffset: 60;
}
30% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes line-anim {
23% {
stroke-dashoffset: 60;
}
30% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes bigCircle-anim {
30% {
stroke-dashoffset: 188.522;
}
43% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes bigCircle-anim {
30% {
stroke-dashoffset: 188.522;
}
43% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes smallCircle-anim {
43% {
stroke-dashoffset: 94.261;
}
53% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes smallCircle-anim {
43% {
stroke-dashoffset: 94.261;
}
53% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes group-anim {
53% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
61% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
94% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0;
}
}
#keyframes group-anim {
53% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
61% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
94% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0;
}
}
#-webkit-keyframes outer-anim {
61% {
stroke-dashoffset: 201.391;
}
71% {
stroke-dashoffset: 0;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: #00CD73;
}
100% {
stroke-dashoffset: 0;
fill: #00CD73;
}
}
#keyframes outer-anim {
61% {
stroke-dashoffset: 201.391;
}
71% {
stroke-dashoffset: 0;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: #00CD73;
}
100% {
stroke-dashoffset: 0;
fill: #00CD73;
}
}
#-webkit-keyframes inner-anim {
71% {
stroke-dashoffset: 94.261;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: white;
}
100% {
stroke-dashoffset: 0;
fill: white;
}
}
#keyframes inner-anim {
71% {
stroke-dashoffset: 94.261;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: white;
}
100% {
stroke-dashoffset: 0;
fill: white;
}
}
#-webkit-keyframes gray-anim {
53% {
opacity: 1;
}
79% {
opacity: 0.2;
}
94% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes gray-anim {
53% {
opacity: 1;
}
79% {
opacity: 0.2;
}
94% {
opacity: 0;
}
100% {
opacity: 0;
}
}
I know I can remove the "infinite" property to run it once, but the question is, how do you stop it right after instead?


You can pause a CSS animation by using:
animation-play-state: paused;
I've added a button to your example that lets you stop the animation at any point.
function stop() {
$(".pin__group, .pin__grayGroup, .pin__square, .pin__line-1, .pin__line-2, .pin__line-3, .pin__circleBig, .pin__circleSmall, .pin__outer, .pin__inner").addClass("stop");
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pin {
position: absolute;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -60px;
width: 120px;
height: 120px;
overflow: visible;
}
.pin__group {
-webkit-transform-origin: 30px 30px;
transform-origin: 30px 30px;
-webkit-animation: group-anim 8s 1s forwards;
animation: group-anim 8s 1s forwards;
}
.pin__grayGroup {
-webkit-animation: gray-anim 8s 1s infinite;
animation: gray-anim 8s 1s infinite;
}
.pin__square {
stroke: #B8B8B8;
stroke-dasharray: 240, 240;
stroke-dashoffset: 240;
-webkit-animation: square-anim 8s 1s infinite;
animation: square-anim 8s 1s infinite;
}
.pin__line {
stroke: #B8B8B8;
stroke-dasharray: 60, 60;
stroke-dashoffset: 60;
}
.pin__line-1 {
-webkit-animation: line-anim 8s 0.6s infinite;
animation: line-anim 8s 0.6s infinite;
}
.pin__line-2 {
-webkit-animation: line-anim 8s 0.8s infinite;
animation: line-anim 8s 0.8s infinite;
}
.pin__line-3 {
-webkit-animation: line-anim 8s 1s infinite;
animation: line-anim 8s 1s infinite;
}
.pin__circleBig {
stroke: #B8B8B8;
stroke-dasharray: 188.522, 188.522;
stroke-dashoffset: 188.522;
-webkit-animation: bigCircle-anim 8s 1s infinite;
animation: bigCircle-anim 8s 1s infinite;
}
.pin__circleSmall {
stroke: #B8B8B8;
stroke-dasharray: 94.261, 94.261;
stroke-dashoffset: 94.261;
-webkit-animation: smallCircle-anim 8s 1s infinite;
animation: smallCircle-anim 8s 1s infinite;
}
.pin__outer {
stroke: #00CD73;
fill: transparent;
stroke-dasharray: 201.391, 201.391;
stroke-dashoffset: 201.391;
-webkit-animation: outer-anim 8s 1s infinite;
animation: outer-anim 8s 1s infinite;
}
.pin__inner {
stroke: #00CD73;
fill: transparent;
stroke-dasharray: 94.261, 94.261;
stroke-dashoffset: 94.261;
-webkit-animation: inner-anim 8s 1s infinite;
animation: inner-anim 8s 1s infinite;
}
#-webkit-keyframes square-anim {
15% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes square-anim {
15% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes line-anim {
23% {
stroke-dashoffset: 60;
}
30% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes line-anim {
23% {
stroke-dashoffset: 60;
}
30% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes bigCircle-anim {
30% {
stroke-dashoffset: 188.522;
}
43% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes bigCircle-anim {
30% {
stroke-dashoffset: 188.522;
}
43% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes smallCircle-anim {
43% {
stroke-dashoffset: 94.261;
}
53% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes smallCircle-anim {
43% {
stroke-dashoffset: 94.261;
}
53% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes group-anim {
53% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
61% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
94% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#keyframes group-anim {
53% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
61% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
94% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes outer-anim {
61% {
stroke-dashoffset: 201.391;
}
71% {
stroke-dashoffset: 0;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: #00CD73;
}
100% {
stroke-dashoffset: 0;
fill: #00CD73;
}
}
#keyframes outer-anim {
61% {
stroke-dashoffset: 201.391;
}
71% {
stroke-dashoffset: 0;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: #00CD73;
}
100% {
stroke-dashoffset: 0;
fill: #00CD73;
}
}
#-webkit-keyframes inner-anim {
71% {
stroke-dashoffset: 94.261;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: white;
}
100% {
stroke-dashoffset: 0;
fill: white;
}
}
#keyframes inner-anim {
71% {
stroke-dashoffset: 94.261;
}
79% {
stroke-dashoffset: 0;
fill: transparent;
}
94% {
stroke-dashoffset: 0;
fill: white;
}
100% {
stroke-dashoffset: 0;
fill: white;
}
}
#-webkit-keyframes gray-anim {
53% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
79% {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
94% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
#keyframes gray-anim {
53% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
79% {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
94% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
.stop {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<svg class="pin" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" version="1.1">
<g class="pin__group">
<g class="pin__grayGroup">
<path class="pin__square" fill="none" stroke-width="1" d="M0,0 0,60 60,60 60,0z"/>
<path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M15,0 15,60"/>
<path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M30,0 30,60"/>
<path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M45,0 45,60"/>
<path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M0,45 60,45"/>
<path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M0,30 60,30"/>
<path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M0,15 60,15"/>
<path class="pin__circleBig" fill="none" stroke-width="1" d="M60,30 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>
<path class="pin__circleSmall" fill="none" stroke-width="1" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/>
</g>
<g class="pin__greenGroup">
<path class="pin__outer" stroke-width="2" d="M30,0 a30,30 0 0,1 30,30 L60,60 30,60 a30,30 0 0,1 0,-60"/>
<path class="pin__inner" stroke-width="2" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/>
</g>
</g>
</svg>
<button onclick="stop()">Stop</button>

Related

CSS Animation Currently Only working in Firefox, not Chrome or Safari

Currently working on a simple animation to show a slide being inserted into a viewmaster.
it works in firefox, but not chrome or safari. I haven't tested other browsers yet. I've included -webkit-animation as well as #-webkit-keyframes. I've been trying to find other similar questions, but no luck so far.
html,
body {
width: 100%;
height: 100%;
background-color: #F2EFEB;
}
.intro-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
}
.logo-bottom,
.logo-top {
display: inline-block;
position: relative;
}
.logo-bottom {
-o-animation: logo-anim-bottom 1.5s;
-ms-animation: logo-anim-bottom 1.5s;
-moz-animation: logo-anim-bottom 1.5s;
-webkit-animation: logo-anim-bottom 1.5s infinite;
animation: logo-anim-bottom 1.5s infinite;
}
.logo-top {
-o-animation: logo-anim-top 1.5;
-ms-animation: logo-anim-top 1.5;
-moz-animation: logo-anim-top 1.5s;
-webkit-animation: logo-anim-top 1.5 infinite;
animation: logo-anim-top 1.5s infinite;
}
#-ms-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#-o-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#-moz-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#-ms-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#-webkit-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
#-ms-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
#-o-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
#-moz-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
#-ms-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
#-webkit-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
#keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
.red {
fill: #E491C5;
}
.yellow {
fill: #FDF388;
}
.dark-yellow {
fill: #e0d580;
}
.brown {
fill: #633E17;
}
.pure-white {
fill: #ffffff;
}
.dark-grey {
fill: #30332a;
}
.white {
fill: #F2EFEB;
}
.black {
fill: #181914;
}
<div class="intro-container">
<div class="animate__animated animate__fadeOut animate__fast animate__delay-1s">
<svg width="250px" height="350px" viewBox="0 0 250 350" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="slide" class="logo-top">
<circle class="pure-white" cx="126.01" cy="205.99" r="61.21"/>
<path class="dark-grey" d="M134.27,154.76v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,152.2,134.27,153.34,134.27,154.76z"/>
<path class="dark-grey" d="M158.9,163.6l-4.31,10.55c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31c-1.31-0.54-1.94-2.03-1.4-3.34
l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31C158.81,160.79,159.44,162.29,158.9,163.6z"/>
<path class="dark-grey" d="M134.27,244.97v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,242.41,134.27,243.56,134.27,244.97z"/>
<path class="dark-grey" d="M88.35,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C87.2,197.73,88.35,198.88,88.35,200.3z"/>
<path class="dark-grey" d="M178.45,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C177.31,197.73,178.45,198.88,178.45,200.3z"/>
<path class="dark-grey" d="M170.99,174.6l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56c-1.3,0.57-2.81-0.03-3.37-1.32
l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56C168.91,172.71,170.42,173.3,170.99,174.6z"/>
<path class="dark-grey" d="M96.16,174.53l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31c1.31-0.54,2.81,0.09,3.34,1.4
l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31C98.19,176.46,96.7,175.84,96.16,174.53z"/>
<path class="dark-grey" d="M75.24,185.43l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56c1.3,0.57,1.89,2.08,1.32,3.37l-4.56,10.45
c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56C75.27,188.24,74.68,186.73,75.24,185.43z"/>
<path class="dark-grey" d="M93.43,247.92l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31c1.31,0.54,1.94,2.03,1.4,3.34l-4.31,10.55
c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31C93.52,250.72,92.89,249.23,93.43,247.92z"/>
<path class="dark-grey" d="M81.34,236.92l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56c1.3-0.57,2.81,0.03,3.37,1.32
l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56C83.42,238.81,81.91,238.21,81.34,236.92z"/>
<path class="dark-grey" d="M154.29,237.9l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31c-1.31,0.54-2.81-0.09-3.34-1.4
l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31C152.25,235.96,153.75,236.58,154.29,237.9z"/>
<path class="dark-grey" d="M175.22,226.99l-4.56,10.45c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56c-1.3-0.57-1.89-2.08-1.32-3.37
l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56C175.19,224.18,175.78,225.69,175.22,226.99z"/>
</g>
<g id="viewmaster" class="logo-bottom">
<g>
<path class="yellow" d="M212.43,184.86c2.66,6.89,8.95,11.97,16.53,12.9c-2.38,2.14-5.03,3.61-7.25,4.59
c-2.78-2.16-6.23-3.52-10.01-3.68c-0.61-0.08-1.22-0.14-1.83-0.21l-0.64-12.25C210.33,185.81,211.39,185.36,212.43,184.86z"/>
<path class="yellow" d="M213.71,177.53L213.71,177.53c0-9.79,7.94-17.73,17.73-17.73s17.73,7.94,17.73,17.73s-7.94,17.73-17.73,17.73
C221.66,195.26,213.73,187.32,213.71,177.53z M231.45,171.37c-3.41-0.01-6.18,2.75-6.18,6.16c0,3.4,2.75,6.15,6.14,6.16
c3.4,0.01,6.17-2.74,6.18-6.14C237.6,174.15,234.85,171.38,231.45,171.37L231.45,171.37z"/>
<path class="dark-yellow" d="M217.81,177.53C217.81,177.53,217.81,177.53,217.81,177.53c0-7.53,6.11-13.64,13.64-13.64
s13.64,6.11,13.64,13.64c0,7.53-6.11,13.64-13.64,13.64C223.92,191.17,217.81,185.06,217.81,177.53z M221.2,177.53
c0,0.01,0,0.01,0,0.02c0.01,5.67,4.62,10.26,10.29,10.25c5.67-0.01,10.26-4.62,10.25-10.29c-0.01-5.67-4.62-10.26-10.29-10.25
C225.79,167.28,221.2,171.87,221.2,177.53z"/>
<circle class="yellow" cx="231.45" cy="177.53" r="11.95"/>
</g>
<path class="red" d="M44.2,198.19c0.21-4.59,0.58-12.6,0.88-18.43c0.46-8.64,4.42-11.11,6.96-12.67
c2.54-1.56,17.14-0.91,28.13-0.91c11.95,7.02,28.25,9.14,45.84,9.75c17.59-0.64,33.89-2.73,45.83-9.75c11,0,25.6-0.64,28.14,0.91
c2.54,1.55,6.5,4.06,6.95,12.67c0.3,5.81,0.66,13.83,0.86,18.43C153.45,191.72,98.54,191.72,44.2,198.19z"/>
<path class="red" d="M207.85,256.46c-0.89,14.56-6.66,47.82-8.56,52.07c-2.08,4.67-8.12,5.2-8.12,5.2H60.86
c0,0-6.09-0.52-8.12-5.2c-1.85-4.26-7.66-37.51-8.57-52.06c27.09,3.22,54.34,4.85,81.63,4.84
C153.22,261.3,180.62,259.67,207.85,256.46z"/>
<path class="red" d="M25.89,216.15v22.34c0.01,8.14,6.46,14.82,14.59,15.11c28.3,3.53,56.79,5.29,85.31,5.29
c28.66,0,57.29-1.77,85.73-5.29c8.14-0.29,14.59-6.97,14.59-15.11v-22.34c-0.01-8.14-6.46-14.81-14.59-15.1
c-56.79-7.11-114.24-7.11-171.03,0C32.35,201.33,25.9,208.01,25.89,216.15z M33.16,216.16c0.02-4.35,3.54-7.87,7.89-7.88
c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34c-0.02,4.35-3.54,7.87-7.89,7.89
c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88V216.16z"/>
<path id="_x3C_Path_x3E_" class="dark-grey" d="M41.06,208.28c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34
c-0.02,4.35-3.54,7.87-7.89,7.89c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88v-22.34
C33.18,211.81,36.71,208.29,41.06,208.28z"/>
</g>
</svg>
</div>
</div>

You can use tranform translateY() instead of top values and it should work cross-browser. Pretty sure Chrome does not respect the position relative for child SVG elements.
html,
body {
width: 100%;
height: 100%;
background-color: #F2EFEB;
}
.intro-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
}
.logo-bottom,
.logo-top {
display: inline-block;
position: relative;
}
.logo-bottom {
-o-animation: logo-anim-bottom 1.5s;
-ms-animation: logo-anim-bottom 1.5s;
-moz-animation: logo-anim-bottom 1.5s;
-webkit-animation: logo-anim-bottom 1.5s infinite;
animation: logo-anim-bottom 1.5s infinite;
}
.logo-top {
-o-animation: logo-anim-top 1.5;
-ms-animation: logo-anim-top 1.5;
-moz-animation: logo-anim-top 1.5s;
-webkit-animation: logo-anim-top 1.5 infinite;
animation: logo-anim-top 1.5s infinite;
}
#-ms-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-o-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-moz-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-webkit-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-ms-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-o-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-moz-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#-webkit-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
#keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
.red {
fill: #E491C5;
}
.yellow {
fill: #FDF388;
}
.dark-yellow {
fill: #e0d580;
}
.brown {
fill: #633E17;
}
.pure-white {
fill: #ffffff;
}
.dark-grey {
fill: #30332a;
}
.white {
fill: #F2EFEB;
}
.black {
fill: #181914;
}
<div class="intro-container">
<div class="animate__animated animate__fadeOut animate__fast animate__delay-1s">
<svg width="250px" height="350px" viewBox="0 0 250 350" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="slide" class="logo-top">
<circle class="pure-white" cx="126.01" cy="205.99" r="61.21"/>
<path class="dark-grey" d="M134.27,154.76v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,152.2,134.27,153.34,134.27,154.76z"/>
<path class="dark-grey" d="M158.9,163.6l-4.31,10.55c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31c-1.31-0.54-1.94-2.03-1.4-3.34
l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31C158.81,160.79,159.44,162.29,158.9,163.6z"/>
<path class="dark-grey" d="M134.27,244.97v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,242.41,134.27,243.56,134.27,244.97z"/>
<path class="dark-grey" d="M88.35,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C87.2,197.73,88.35,198.88,88.35,200.3z"/>
<path class="dark-grey" d="M178.45,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C177.31,197.73,178.45,198.88,178.45,200.3z"/>
<path class="dark-grey" d="M170.99,174.6l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56c-1.3,0.57-2.81-0.03-3.37-1.32
l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56C168.91,172.71,170.42,173.3,170.99,174.6z"/>
<path class="dark-grey" d="M96.16,174.53l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31c1.31-0.54,2.81,0.09,3.34,1.4
l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31C98.19,176.46,96.7,175.84,96.16,174.53z"/>
<path class="dark-grey" d="M75.24,185.43l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56c1.3,0.57,1.89,2.08,1.32,3.37l-4.56,10.45
c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56C75.27,188.24,74.68,186.73,75.24,185.43z"/>
<path class="dark-grey" d="M93.43,247.92l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31c1.31,0.54,1.94,2.03,1.4,3.34l-4.31,10.55
c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31C93.52,250.72,92.89,249.23,93.43,247.92z"/>
<path class="dark-grey" d="M81.34,236.92l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56c1.3-0.57,2.81,0.03,3.37,1.32
l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56C83.42,238.81,81.91,238.21,81.34,236.92z"/>
<path class="dark-grey" d="M154.29,237.9l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31c-1.31,0.54-2.81-0.09-3.34-1.4
l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31C152.25,235.96,153.75,236.58,154.29,237.9z"/>
<path class="dark-grey" d="M175.22,226.99l-4.56,10.45c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56c-1.3-0.57-1.89-2.08-1.32-3.37
l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56C175.19,224.18,175.78,225.69,175.22,226.99z"/>
</g>
<g id="viewmaster" class="logo-bottom">
<g>
<path class="yellow" d="M212.43,184.86c2.66,6.89,8.95,11.97,16.53,12.9c-2.38,2.14-5.03,3.61-7.25,4.59
c-2.78-2.16-6.23-3.52-10.01-3.68c-0.61-0.08-1.22-0.14-1.83-0.21l-0.64-12.25C210.33,185.81,211.39,185.36,212.43,184.86z"/>
<path class="yellow" d="M213.71,177.53L213.71,177.53c0-9.79,7.94-17.73,17.73-17.73s17.73,7.94,17.73,17.73s-7.94,17.73-17.73,17.73
C221.66,195.26,213.73,187.32,213.71,177.53z M231.45,171.37c-3.41-0.01-6.18,2.75-6.18,6.16c0,3.4,2.75,6.15,6.14,6.16
c3.4,0.01,6.17-2.74,6.18-6.14C237.6,174.15,234.85,171.38,231.45,171.37L231.45,171.37z"/>
<path class="dark-yellow" d="M217.81,177.53C217.81,177.53,217.81,177.53,217.81,177.53c0-7.53,6.11-13.64,13.64-13.64
s13.64,6.11,13.64,13.64c0,7.53-6.11,13.64-13.64,13.64C223.92,191.17,217.81,185.06,217.81,177.53z M221.2,177.53
c0,0.01,0,0.01,0,0.02c0.01,5.67,4.62,10.26,10.29,10.25c5.67-0.01,10.26-4.62,10.25-10.29c-0.01-5.67-4.62-10.26-10.29-10.25
C225.79,167.28,221.2,171.87,221.2,177.53z"/>
<circle class="yellow" cx="231.45" cy="177.53" r="11.95"/>
</g>
<path class="red" d="M44.2,198.19c0.21-4.59,0.58-12.6,0.88-18.43c0.46-8.64,4.42-11.11,6.96-12.67
c2.54-1.56,17.14-0.91,28.13-0.91c11.95,7.02,28.25,9.14,45.84,9.75c17.59-0.64,33.89-2.73,45.83-9.75c11,0,25.6-0.64,28.14,0.91
c2.54,1.55,6.5,4.06,6.95,12.67c0.3,5.81,0.66,13.83,0.86,18.43C153.45,191.72,98.54,191.72,44.2,198.19z"/>
<path class="red" d="M207.85,256.46c-0.89,14.56-6.66,47.82-8.56,52.07c-2.08,4.67-8.12,5.2-8.12,5.2H60.86
c0,0-6.09-0.52-8.12-5.2c-1.85-4.26-7.66-37.51-8.57-52.06c27.09,3.22,54.34,4.85,81.63,4.84
C153.22,261.3,180.62,259.67,207.85,256.46z"/>
<path class="red" d="M25.89,216.15v22.34c0.01,8.14,6.46,14.82,14.59,15.11c28.3,3.53,56.79,5.29,85.31,5.29
c28.66,0,57.29-1.77,85.73-5.29c8.14-0.29,14.59-6.97,14.59-15.11v-22.34c-0.01-8.14-6.46-14.81-14.59-15.1
c-56.79-7.11-114.24-7.11-171.03,0C32.35,201.33,25.9,208.01,25.89,216.15z M33.16,216.16c0.02-4.35,3.54-7.87,7.89-7.88
c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34c-0.02,4.35-3.54,7.87-7.89,7.89
c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88V216.16z"/>
<path id="_x3C_Path_x3E_" class="dark-grey" d="M41.06,208.28c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34
c-0.02,4.35-3.54,7.87-7.89,7.89c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88v-22.34
C33.18,211.81,36.71,208.29,41.06,208.28z"/>
</g>
</svg>
</div>
</div>

Safari does not respect #Keyframes opacity/fill

The following animation is working in the newest Chrome and FF, but Safari does not follow the defined #Keyframes. Can you help fixing this?
The issue is that Safari opacity does not follow the defined #Keyframes and "spreads out" the fill opacity during the full animation instead of respecting the #Keyframese at 0%, 30%, 90% and 100% to control the opacity. The intention is that the fill opacity should only kick in from Keyframe 90% and 100% of the animation time, not from the beginning.
Chrome - Good: https://imgur.com/zfNuV2r
Safari - Bad: https://imgur.com/AkmaAwA
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 10;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 10;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
#keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 10; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#-webkit-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1.0; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#-moz-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 10; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
#-webkit-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
#-moz-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 10; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron{fill:none;stroke:none;stroke-miterlimit:10;}
.dot{fill:none;stroke:none;stroke-miterlimit:10;}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron" d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z"/>
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z"/>
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z"/>
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z"/>
<path class="syncron" d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z"/>
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z"/>
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z"/>
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z"/>
</g>
</a>
</svg>

I found the answer. The solution was to define fill: rbga() for all the #keyframes. It seems that Chrome and Firefox were more forgiving than Safari. So I added fill: rbga() and as a bonus I also added a stroke-opacity value to counter what #Sean mentioned above when setting opacity values to single digits via rgba()
The final code that works on Chrome, Firefox, Safari and Mobile browsers are:
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 1;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 1;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
#keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
#-webkit-keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
#-moz-keyframes syncron {
0% {fill: rgba(45,63,80,0); stroke-opacity: 0; stroke-dasharray: 266;}
30% {fill: rgba(45,63,80,0); stroke-opacity: 0.5; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0); stroke-opacity: 1;}
100% {fill: rgba(45,63,80,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
#keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
#-webkit-keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
#-moz-keyframes dot {
0% {fill: rgba(230,77,60,0); stroke-opacity: 0; stroke-dasharray: 52;}
30% {fill: rgba(230,77,60,0); stroke-opacity: 0.5; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0); stroke-opacity: 1;}
100% {fill: rgba(230,77,60,1); stroke-opacity: 1; stroke-dasharray: 0;}
}
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron {
fill: none;
stroke: none;
stroke-miterlimit: 10;
}
.dot {
fill: none;
stroke: none;
stroke-miterlimit: 10;
}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron"
d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z" />
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z" />
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z" />
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z" />
<path class="syncron"
d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z" />
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z" />
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z" />
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z" />
</g>
</a>
</svg>

The opacity CSS property should only be set to a value between 0 and 1. Zero is completely transparent and one is completely opaque. See the MD docs for opacity. You're setting it to 10 in several places, which is likely the cause of the unexpected behavior.
Try changing those instances of 10 to 1:
path.syncron {
stroke: #2d3f50;
fill: #2d3f50;
stroke-dasharray: 266;
opacity: 1;
-moz-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
animation: syncron 2s cubic-bezier(0,0.23,1,0.1);
}
path.dot {
stroke: #e64d3c;
fill: #e64d3c;
stroke-dasharray: 52;
opacity: 1;
-moz-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
-webkit-animation: dot 2s cubic-bezier(0,0.23,1,0.1);
animation: dot 2s cubic-bezier(0,0.23,1,0.1);
}
/*Syncron Logo animation*/
#keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#-webkit-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#-moz-keyframes syncron {
0% {opacity: 0; fill: none; stroke-dasharray: 266;}
30% {opacity: 0; fill: none; stroke-dasharray: 266;}
90% {fill: rgba(45,63,80,0);}
100% {opacity: 1; fill: rgba(45,63,80,1); stroke-dasharray: 0;}
}
#keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
#-webkit-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
#-moz-keyframes dot {
0% {opacity: 0; fill: none; stroke-dasharray: 52;}
30% {opacity: 0; fill: none; stroke-dasharray: 52;}
90% {fill: rgba(230,77,60,0);}
100% {opacity: 1; fill: rgba(230,77,60,1); stroke-dasharray: 0;}
}
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409.11px" height="77.54" viewBox="0 0 409.11 105.75">
<style type="text/css">
.syncron{fill:none;stroke:none;stroke-miterlimit:10;}
.dot{fill:none;stroke:none;stroke-miterlimit:10;}
</style>
<title>.syncron Logo | All rights reserved (c) 2019 Syncron</title>
<a class="hide-on-fallback">
<g>
<path class="syncron" d="M52.97,69.78c7.4,0,11.11-2.37,11.11-7.1c0-1.47-0.73-2.58-2.2-3.35c-1.47-0.77-3.32-1.45-5.55-2.05
c-2.24-0.6-4.65-1.22-7.25-1.85c-2.6-0.63-5.02-1.52-7.25-2.65c-2.24-1.13-4.09-2.62-5.55-4.45c-1.47-1.83-2.2-4.08-2.2-6.75
c0-2.67,0.4-4.97,1.2-6.9c0.8-1.93,2-3.6,3.6-5c3.53-3,8.44-4.5,14.71-4.5c5,0,9.84,0.83,14.51,2.5c0.93,0.33,1.65,0.87,2.15,1.6
c0.5,0.73,0.75,1.55,0.75,2.45s-0.38,1.75-1.15,2.55c-0.77,0.8-1.52,1.2-2.25,1.2c-0.73,0-1.64-0.17-2.7-0.5
c-3.2-1-6.7-1.5-10.51-1.5s-6.69,0.67-8.65,2c-1.97,1.34-2.95,2.94-2.95,4.8c0,1.87,0.75,3.25,2.25,4.15
c1.5,0.9,3.35,1.65,5.55,2.25c2.2,0.6,4.62,1.2,7.25,1.8c2.63,0.6,5.05,1.44,7.25,2.5c5.2,2.67,7.8,6.8,7.8,12.41
c0,4.27-1.6,7.74-4.8,10.41c-3.47,2.94-8.31,4.4-14.51,4.4c-6.74,0-12.81-1.5-18.21-4.5c-1.14-0.8-1.7-1.8-1.7-3
c0-1.2,0.37-2.22,1.1-3.05c0.73-0.83,1.53-1.25,2.4-1.25c0.87,0,1.9,0.27,3.1,0.8C44.13,68.92,48.36,69.78,52.97,69.78z"/>
<path class="syncron" d="M126.51,27.01c0.87,0.9,1.3,1.84,1.3,2.8c0,0.97-0.1,1.69-0.3,2.15L100.19,97.6c-0.87,2.07-2.27,3.1-4.2,3.1
c-1.2,0-2.22-0.43-3.05-1.3c-0.83-0.87-1.25-1.74-1.25-2.6c0-0.87,0.1-1.57,0.3-2.1l6.5-16.71L79.68,32.16
c-0.27-0.67-0.4-1.47-0.4-2.4c0-0.93,0.43-1.85,1.3-2.75c0.87-0.9,1.83-1.35,2.9-1.35c2.2,0,3.7,0.93,4.5,2.8l15.41,38.22
l15.71-38.02c0.87-2,2.27-3,4.2-3C124.57,25.66,125.64,26.11,126.51,27.01z"/>
<path class="syncron" d="M163.63,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
c3.43,0,6.25,0.52,8.45,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C170.38,34.65,167.56,33.56,163.63,33.56z"/>
<path class="syncron" d="M223.26,69.68c3.74,0,7.3-0.93,10.71-2.8c1.2-0.67,2.27-1,3.2-1c0.93,0,1.77,0.43,2.5,1.3
c0.73,0.87,1.1,1.9,1.1,3.1c0,1.2-0.77,2.3-2.3,3.3c-4.74,3.07-10.07,4.6-16.01,4.6c-7.4,0-13.64-2.33-18.71-7
c-5.34-4.94-8-11.44-8-19.51c0-8.07,2.67-14.57,8-19.51c5.07-4.67,11.31-7,18.71-7c4,0,7.29,0.52,9.86,1.55
c2.57,1.04,4.62,2.05,6.15,3.05c1.53,1,2.3,2.1,2.3,3.3s-0.37,2.24-1.1,3.1c-0.73,0.87-1.47,1.3-2.2,1.3c-1.14,0-2.3-0.33-3.5-1
c-3.4-1.87-6.97-2.8-10.71-2.8c-5.87,0-10.41,1.65-13.61,4.95c-3.2,3.3-4.8,7.65-4.8,13.06c0,5.4,1.6,9.76,4.8,13.06
C212.85,68.03,217.39,69.68,223.26,69.68z"/>
<path class="syncron" d="M261.78,34.56c4.67-6.27,9.91-9.41,15.71-9.41h0.5c1.27,0,2.32,0.43,3.15,1.3c0.83,0.87,1.25,1.95,1.25,3.25
s-0.43,2.34-1.3,3.1c-0.87,0.77-1.97,1.15-3.3,1.15h-0.5c-3.34,0-6.32,0.82-8.96,2.45c-2.64,1.64-4.82,3.75-6.55,6.35v30.42
c0,1.27-0.45,2.33-1.35,3.2c-0.9,0.87-1.99,1.3-3.25,1.3c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26
c0-1.27,0.43-2.35,1.3-3.25c0.87-0.9,1.93-1.35,3.2-1.35c1.27,0,2.35,0.45,3.25,1.35c0.9,0.9,1.35,1.99,1.35,3.25V34.56z"/>
<path class="syncron" d="M313.91,25.16c7.74,0,13.94,2.44,18.61,7.3c4.67,4.94,7,11.34,7,19.21c0,7.87-2.34,14.28-7,19.21
c-4.67,4.87-10.87,7.3-18.61,7.3c-7.8,0-14.01-2.43-18.61-7.3c-4.67-4.87-7-11.27-7-19.21c0-7.94,2.33-14.34,7-19.21
C299.9,27.59,306.11,25.16,313.91,25.16z M302.76,65.73c1.57,1.44,3.33,2.49,5.3,3.15c1.97,0.67,3.9,1,5.8,1c1.9,0,3.83-0.33,5.8-1
c1.97-0.67,3.75-1.7,5.35-3.1c3.6-3.27,5.4-8,5.4-14.21c0-6-1.8-10.67-5.4-14.01c-3-2.73-6.7-4.1-11.11-4.1
c-7.2,0-12.21,3.24-15.01,9.71c-1,2.34-1.5,5.15-1.5,8.46c0,3.3,0.5,6.12,1.5,8.46S301.19,64.3,302.76,65.73z"/>
<path class="syncron" d="M377.75,33.56c-5.87,0-11.34,3.2-16.41,9.61v30.02c0,1.27-0.45,2.33-1.35,3.2s-1.99,1.3-3.25,1.3
c-1.27,0-2.34-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V30.26c0-1.33,0.43-2.43,1.3-3.3c0.87-0.87,1.93-1.3,3.2-1.3
c1.27,0,2.35,0.43,3.25,1.3c0.9,0.87,1.35,1.97,1.35,3.3v4.1c2.67-2.8,4.97-4.77,6.9-5.9c3.8-2.2,7.42-3.3,10.86-3.3
s6.25,0.52,8.46,1.55c2.2,1.04,4.07,2.45,5.6,4.25c3.13,3.67,4.7,8.27,4.7,13.81v28.42c0,1.27-0.45,2.33-1.35,3.2
s-1.99,1.3-3.25,1.3c-1.27,0-2.33-0.43-3.2-1.3c-0.87-0.87-1.3-1.93-1.3-3.2V45.77c0-3.8-0.85-6.79-2.55-8.96
C384.5,34.65,381.68,33.56,377.75,33.56z"/>
</g>
<g>
<path class="dot" d="M16.31,62.08h4c1.93,0,3.28,0.37,4.05,1.1c0.77,0.73,1.15,2.07,1.15,4v4.8c0,1.94-0.38,3.29-1.15,4.05
c-0.77,0.77-2.12,1.15-4.05,1.15h-4c-1.94,0-3.29-0.38-4.05-1.15c-0.77-0.77-1.15-2.12-1.15-4.05v-4.8c0-1.93,0.38-3.27,1.15-4
C13.02,62.45,14.37,62.08,16.31,62.08z"/>
</g>
</a>
</svg>

SVG drawing - shape vanishing after animation [duplicate]

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 5 years ago.
I have a shape being animated/drawn which is fine, when the animation is done the shape remains on the page for a couple seconds then vanishes.
First time trying out CSS animations so don't fully understand why it vanishes off the page, I know it's probably something really obvious but any help pointers would be much appreciated.
body {
background-color: #fff;
}
svg {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
}
.path {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear;
-moz-animation: draw 5s linear;
animation: draw 5s linear;
fill-opacity: 0;
-webkit-animation-delay: 1.2s; /* Safari and Chrome */
animation-delay: 1.2s;
}
.path-first-o {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
animation: draw 5s linear forwards;
fill-opacity: 0;
}
#-webkit-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#-moz-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
<g id="layer_1">
<g>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
<path
class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
</g>
</g>
</svg>
See CodePen here

You are just missing the forwards keyword for the animation property. It is the a value for the animation-fill-mode property (see mdn).
This value keeps the last frame of the animation.
You can also use it in the animation shorthand like this :
body {
background-color: #fff;
}
svg {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
}
.path {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear;
-moz-animation: draw 5s linear;
animation: draw 5s linear;
fill-opacity: 0;
-webkit-animation-delay: 1.2s;
/* Safari and Chrome */
animation-delay: 1.2s;
}
.path-first-o {
stroke-dashoffset: 1600;
stroke-dasharray: 1600;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
animation: draw 5s linear forwards;
fill-opacity: 0;
}
#-webkit-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#-moz-keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
#keyframes draw {
30% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
100% {
stroke-dashoffset: 1;
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
<g id="layer_1">
<g>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
<path class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
<path
class="path-first-o"
fill="#027eb4" stroke="#027eb4"
d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
</g>
</g>
</svg>

Increasing a material loader's size

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

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

Changing color of object/shape in SVG animation

SVG animation - http://shrineweb.in/other-files/clients/proxymis/cloudDrizzleSun.svg
I want to change color of water drops which is currently black.
How do I do it?
Here is the code of the SVG:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="cloudDrizzleSun"
class="climacon climacon_cloudDrizzleSun"
x="0px"
y="0px"
viewBox="15 15 70 70"
enable-background="new 15 15 70 70"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="cloudDrizzleSun.svg"><metadata
id="metadata7959"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs7957" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1138"
id="namedview7955"
showgrid="false"
inkscape:zoom="19.189899"
inkscape:cx="31.052451"
inkscape:cy="43.388"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g7939" />
<style
type="text/css"
id="style7904">
svg{
shape-rendering: geometricPrecision
}
g, path, circle, rect{
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
}
.climacon_component-stroke_drizzle {
fill-opacity: 0;
-webkit-animation-name: drizzleFall, fillOpacity2;
-moz-animation-name: drizzleFall, fillOpacity2;
-o-animation-name: drizzleFall, fillOpacity2;
animation-name: drizzleFall, fillOpacity2;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.climacon_component-stroke_drizzle:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.climacon_component-stroke_drizzle:nth-child(2) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.climacon_component-stroke_drizzle:nth-child(3) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.climacon_componentWrap-sun_cloud {
-webkit-animation-name: behindCloudMove, rotate;
-moz-animation-name: behindCloudMove, rotate;
-o-animation-name: behindCloudMove, rotate;
animation-name: behindCloudMove, rotate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-timing-function: ease-out, linear;
-moz-animation-timing-function: ease-out, linear;
-o-animation-timing-function: ease-out, linear;
animation-timing-function: ease-out, linear;
-webkit-animation-delay: 0, 3s;
-moz-animation-delay: 0, 3s;
-o-animation-delay: 0, 3s;
animation-delay: 0, 3s;
-webkit-animation-duration: 3s, 12s;
-moz-animation-duration: 3s, 12s;
-o-animation-duration: 3s, 12s;
animation-duration: 3s, 12s;
}
.climacon_component-stroke_sunSpoke {
fill-opacity: 0;
-webkit-animation-name: fillOpacity, scale;
-moz-animation-name: fillOpacity, scale;
-o-animation-name: fillOpacity, scale;
animation-name: fillOpacity, scale;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-delay: 3s, 0;
-moz-animation-delay: 3s, 0;
-o-animation-delay: 3s, 0;
animation-delay: 3s, 0;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.climacon_component-stroke_sunSpoke:nth-child(even) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes drizzleFall {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(21px);
}
}
#-moz-keyframes drizzleFall {
0% {
-moz-transform: translateY(0);
}
100% {
-moz-transform: translateY(21px);
}
}
#-o-keyframes drizzleFall {
0% {
-o-transform: translateY(0);
}
100% {
-o-transform: translateY(21px);
}
}
#keyframes drizzleFall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(21px);
}
}
#-webkit-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-moz-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-o-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-webkit-keyframes rotate{
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate{
0%{
-moz-transform: rotate(0);
}
100%{
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate{
0%{
-o-transform: rotate(0);
}
100%{
-o-transform: rotate(360deg);
}
}
#keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
#-webkit-keyframes scale{
0%{
-webkit-transform: scale(1,1)
}
100%{
-webkit-transform: scale(.5,.5)
}
}
#-moz-keyframes scale{
0%{
-moz-transform: scale(1,1)
}
100%{
-moz-transform: scale(.5,.5)
}
}
#-o-keyframes scale{
0%{
-o-transform: scale(1,1)
}
100%{
-o-transform: scale(.5,.5)
}
}
#keyframes scale{
0%{
transform: scale(1,1)
}
100%{
transform: scale(.5,.5)
}
}
#-webkit-keyframes behindCloudMove {
0% {
-webkit-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-webkit-transform: translateX(0) translateY(0);
}
}
#-moz-keyframes behindCloudMove {
0% {
-moz-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-moz-transform: translateX(0) translateY(0);
}
}
#-o-keyframes behindCloudMove {
0% {
-o-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-o-transform: translateX(0) translateY(0);
}
}
#keyframes behindCloudMove {
0% {
transform: translateX(-1.75px) translateY(1.75px);
}
100% {
transform: translateX(0) translateY(0);
}
}
#-webkit-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-moz-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-o-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
</style>
<clipPath
id="cloudFillClip">
<path
d="M15,15v70h70V15H15z M59.943,61.639c-3.02,0-12.381,0-15.999,0c-6.626,0-11.998-5.371-11.998-11.998c0-6.627,5.372-11.999,11.998-11.999c5.691,0,10.434,3.974,11.665,9.29c1.252-0.81,2.733-1.291,4.334-1.291c4.418,0,8,3.582,8,8C67.943,58.057,64.361,61.639,59.943,61.639z"
id="path7907" />
</clipPath>
<clipPath
id="sunCloudFillClip">
<path
d="M15,15v70h70V15H15z M57.945,49.641c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C65.943,46.059,62.362,49.641,57.945,49.641z"
id="path7910" />
</clipPath>
<clipPath
id="cloudSunFillClip">
<path
d="M15,15v70h20.947V63.481c-4.778-2.767-8-7.922-8-13.84c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12c0,5.262-3.394,9.723-8.107,11.341V85H85V15H15z"
id="path7913" />
</clipPath>
<g
class="climacon_iconWrap climacon_iconWrap-cloudDrizzleSun"
id="g7915">
<g
clip-path="url(#cloudSunFillClip)"
id="g7917">
<g
class="climacon_componentWrap climacon_componentWrap-sun climacon_componentWrap-sun_cloud"
id="g7919">
<g
class="climacon_componentWrap climacon_componentWrap_sunSpoke"
id="g7921">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"
id="path7923" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M72.174,30.3c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L72.174,30.3z"
id="path7925" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"
id="path7927" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M43.892,30.3l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C45.939,31.081,44.673,31.081,43.892,30.3z"
id="path7929" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"
id="path7931" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M43.892,52.925c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L43.892,52.925z"
id="path7933" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"
id="path7935" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M72.174,52.925l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C70.125,52.144,71.391,52.144,72.174,52.925z"
id="path7937" />
</g>
<g
class="climacon_componentWrap climacon_componentWrap-sunBody"
clip-path="url(#sunCloudFillClip)"
id="g7939">
<circle
class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody"
cx="58.033"
cy="41.612"
r="11.999"
id="circle7941"
style="fill:#ffe680;fill-opacity:1" />
</g>
</g>
</g>
<g
class="climacon_componentWrap climacon_componentWrap-drizzle"
id="g7943">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left"
d="M42.001,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2.001-0.895-2.001-2v-3.998C40,54.538,40.896,53.644,42.001,53.644z"
id="path7945" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle"
d="M49.999,53.644c1.104,0,2,0.896,2,2v4c0,1.104-0.896,2-2,2s-1.998-0.896-1.998-2v-4C48.001,54.54,48.896,53.644,49.999,53.644z"
id="path7947" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right"
d="M57.999,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2-0.895-2-2v-3.998C55.999,54.538,56.894,53.644,57.999,53.644z"
id="path7949" />
</g>
<g
class="climacon_componentWrap climacon_componentWrap-cloud"
clip-path="url(#cloudFillClip)"
id="g7951"
style="fill:#3abbd6;fill-opacity:1">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_cloud"
d="M63.999,64.944v-4.381c2.387-1.386,3.998-3.961,3.998-6.92c0-4.418-3.58-8-7.998-8c-1.603,0-3.084,0.481-4.334,1.291c-1.232-5.316-5.973-9.29-11.664-9.29c-6.628,0-11.999,5.372-11.999,12c0,3.549,1.55,6.729,3.998,8.926v4.914c-4.776-2.769-7.998-7.922-7.998-13.84c0-8.836,7.162-15.999,15.999-15.999c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.336-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12C71.997,58.864,68.655,63.296,63.999,64.944z"
id="path7953"
style="fill:#3abbd6;fill-opacity:1" />
</g>
</g>
</svg>

Answer
Look at the 3 path tags with classes
climacon_component climacon_component-stroke climacon_component-stroke_drizzle
at the very bottom.
Add
style="fill:red;"
or style="fill:#3643D1;" (or any other).
How I found it
I've tried every path element.

Resources