pause/resume animation of complex SVG
95 views
Skip to first unread message
Abdulkhalid Lakhani
Nov 27, 2020, 2:02:21 AM11/27/20
to Snapsvg
Hi,
I have very complex SVGs here is one of them
<svg
version="1.1"
id="cloudFogMoonAltFill"
class="climacon climacon_cloudFogMoonAltFill"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="15 15 70 70"
enable-background="new 15 15 70 70"
xml:space="preserve">
<style type="text/css"><![CDATA[
svg{
shape-rendering: geometricPrecision
}
g, path, circle, rect{
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 12s;
-webkit-animation-direction: normal;
-moz-transform-origin: 50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 12s;
-moz-animation-direction: normal;
-o-transform-origin: 50% 50%;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 12s;
-o-animation-direction: normal;
transform-origin: 50% 50%;
transform-box: fill-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 12s;
animation-direction: normal;
}
.climacon_componentWrap-moon_cloud {
-webkit-animation-name: behindCloudMove, wobble;
-moz-animation-name: behindCloudMove, wobble;
-o-animation-name: behindCloudMove, wobble;
animation-name: behindCloudMove, wobble;
-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;
}
@-webkit-keyframes wobble{
0%{
-webkit-transform: rotate(0);
}
25%{
-webkit-transform: rotate(-15deg);
}
50%{
-webkit-transform: rotate(0);
}
75%{
-webkit-transform: rotate(15deg);
}
100%{
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes wobble{
0%{
-moz-transform: rotate(0);
}
25%{
-moz-transform: rotate(-15deg);
}
50%{
-moz-transform: rotate(0);
}
75%{
-moz-transform: rotate(15deg);
}
100%{
-moz-transform: rotate(0deg);
}
}
@-o-keyframes wobble{
0%{
-o-transform: rotate(0);
}
25%{
-o-transform: rotate(-15deg);
}
50%{
-o-transform: rotate(0);
}
75%{
-o-transform: rotate(15deg);
}
100%{
-o-transform: rotate(0deg);
}
}
@keyframes wobble{
0%{
transform: rotate(0);
}
25%{
transform: rotate(-15deg);
}
50%{
transform: rotate(0);
}
75%{
transform: rotate(15deg);
}
100%{
transform: rotate(0deg);
}
}
@-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);
}
}
/* FOG */
.climacon_component-stroke_fogLine {
fill-opacity: 0.5;
-webkit-animation-name: translateFog, fillOpacityFog;
-moz-animation-name: translateFog, fillOpacityFog;
-o-animation-name: translateFog, fillOpacityFog;
animation-name: translateFog, fillOpacityFog;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
-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: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
animation-duration: 12s;
}
.climacon_component-stroke_fogLine:nth-child(even) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
@-webkit-keyframes translateFog {
0% {
-webkit-transform: translateY(0);
}
25% {
-webkit-transform: translateX(2.5px);
}
75% {
-webkit-transform: translateX(-2.5px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes translateFog {
0% {
-moz-transform: translateY(0);
}
25% {
-moz-transform: translateX(2.5px);
}
75% {
-moz-transform: translateX(-2.5px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes translateFog {
0% {
-o-transform: translateY(0);
}
25% {
-o-transform: translateX(2.5px);
}
75% {
-o-transform: translateX(-2.5px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes translateFog {
0% {
transform: translateY(0);
}
25% {
transform: translateX(2.5px);
}
75% {
transform: translateX(-2.5px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes fillOpacityFog {
0% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
}
@-moz-keyframes fillOpacityFog {
0% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
}
@-o-keyframes fillOpacityFog {
0% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
}
@keyframes fillOpacityFog {
0% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
}
]]></style>
<clipPath id="newMoonCloudFillClip">
<path d="M15,15v70h70V15H15z M59.943,65.638c-2.775,0-12.801,0-15.998,0c-8.836,0-15.998-7.162-15.998-15.998c0-8.835,7.162-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,12C71.941,60.265,66.57,65.638,59.943,65.638z"/>
</clipPath>
<g class="climacon_iconWrap climacon_iconWrap-cloudFogMoonAltFill">
<g class="climacon_componentWrap climacon_componentWrap_cloud">
<path
class="climacon_component climacon_component-fill climacon_component-fill_cloud"
fill="#FFFFFF"
d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-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,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z"/>
</g>
<g class="climacon_componentWrap climacon_componentWrap-Fog">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M29.177,55.641c-0.262-0.646-0.473-1.314-0.648-2h43.47c0,0.685-0.069,1.349-0.181,2H29.177z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M36.263,35.643c2.294-1.271,4.93-1.999,7.738-1.999c2.806,0,5.436,0.73,7.728,1.999H36.263z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M28.142,47.642c0.085-0.682,0.218-1.347,0.387-1.999h40.396c0.552,0.613,1.039,1.281,1.455,1.999H28.142z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M29.177,43.643c0.281-0.693,0.613-1.359,0.984-2h27.682c0.04,0.068,0.084,0.135,0.123,0.205c0.664-0.114,1.339-0.205,2.033-0.205c2.451,0,4.729,0.738,6.627,2H29.177z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M31.524,39.643c0.58-0.723,1.225-1.388,1.92-2h21.123c0.689,0.61,1.326,1.28,1.902,2H31.524z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M71.816,51.641H28.142c-0.082-0.656-0.139-1.32-0.139-1.999h43.298C71.527,50.285,71.702,50.953,71.816,51.641z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M71.301,57.641c-0.246,0.699-0.555,1.367-0.921,2H31.524c-0.505-0.629-0.957-1.299-1.363-2H71.301z"/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
d="M33.444,61.641h35.48c-0.68,0.758-1.447,1.435-2.299,2H36.263C35.247,63.078,34.309,62.4,33.444,61.641z"/>
</g>
<g clip-path="url(#newMoonCloudFillClip)">
<g class="climacon_componentWrap climacon_componentWrap-moon climacon_componentWrap-moon_cloud">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_moonBody"
d="M61.023,50.641c-6.627,0-11.999-5.372-11.999-11.998c0-6.627,5.372-11.999,11.999-11.999c0.755,0,1.491,0.078,2.207,0.212c-0.132,0.576-0.208,1.173-0.208,1.788c0,4.418,3.582,7.999,8,7.999c0.614,0,1.212-0.076,1.788-0.208c0.133,0.717,0.211,1.452,0.211,2.208C73.021,45.269,67.649,50.641,61.023,50.641z"/>
<path
class="climacon_component climacon_component-fill climacon_component-fill_moon"
fill="#FFFFFF"
d="M59.235,30.851c-3.556,0.813-6.211,3.989-6.211,7.792c0,4.417,3.581,7.999,7.999,7.999c3.802,0,6.979-2.655,7.791-6.211C63.961,39.527,60.139,35.705,59.235,30.851z"/>
</g>
</g>
</g>
</svg><!--cloudFogMoonAltFill -->
Can I use Snap to pause/resume anims?
Your help will be much appreciated
Reply all
Reply to author
Forward
0 new messages