SVG and CSS3 Animations not working in IE and Safari

SVG and CSS3 Animations not working in IE and Safari - javascript

I have this code for animations using HTML5, CSS3 Animations and SVG
line. It’s only working in Chrome, Opera and Firefox and not working
in IE and Safari. Any solution?
Here is the code:
.line {
width: 65%;
margin: 0 auto;
}
#svg path.path {
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation: lines 5s linear forwards;
-moz-animation: lines 5s linear forwards;
-ms-animation: lines 5s linear forwards;
-0-animation: lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I want fix it by making it work in IE and Safari. Please, if possible
in HTML5, CSS and SVG only.

Mozilla Devloper Network - SVG Animation - Browser Compatibility says
Internet Explorer
Not supported
Then use FakeSMIL
Refer this FakeSmile with IE9
Refer this http://jsfiddle.net/whyoz/c3wb5sbr/
function registerAnimation(anim) {
var targets = getTargets(anim);
var elAnimators = new Array();
for(var i=0; i<targets.length ;i++) {
var target = targets[i];
var animator = new Animator(anim, target, i);
animators.push(animator);
elAnimators[i] = animator;
}
anim.animators = elAnimators;
var id = anim.getAttribute("id");
if (id)
id2anim[id] = anim;
for(var i=0; i<elAnimators.length ;i++)
elAnimators[i].register();
}
var svg = document.getElementsByTagName('svg')[0];
.......
var animation = document.createElementNS(
"http://www.w3.org/2000/svg", "animate");
.......
.......
registerAnimation(animation);
animation.beginElement();
Which could bring animation for SVG in IE
Refer MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
Example http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html

Related

Play SVG when entering viewport - Browser Support?

I have the following script that plays my SVGs when they scroll into view (i have several of these SVGs on the page). This works perfectly but only in Firefox! Is this the correct way to do it or is there a better code that will work on other browsers? Ideally, if it can't work on IE, and i am expecting this, then the SVG would just appear like an image and not animated. But i would expect it to work in all other browsers!
<div id="arrow-2id" class="arrow-2 leftarrows">
<!--START ARROW 2-->
<svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044">
<script type="text/javascript">
var diva2 = document.getElementById("arrow-2id");
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
diva2.classList.add("play");
}
}
);
</script>
<mask id="arrow2-mask1" maskUnits="userSpaceOnUse">
<path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/>
</mask>
<mask id="arrow2-mask2" maskUnits="userSpaceOnUse">
<path d="M-3.696,293.63
c130.667-12.167,130.667,23.5,58.5-89.5"/>
</mask>
<path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45
c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181
c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301
c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646
c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687
C91.345,270.88,88.917,283.693,74.443,277.599z"/>
<path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996
c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771
c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656
L74.443,277.599z"/>
</svg>
<style>
.play #arrow2-mask1 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 478.362 478.362;
stroke-dashoffset: 0;
animation: brush2a 2s linear ;
animation-fill-mode: forwards;
}
.play #arrow2-mask2 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 203.128 203.128;
stroke-dashoffset: 0;
animation: brush2b 2s linear ;
animation-fill-mode: forwards;
}
#keyframes brush2a {
0% { stroke-dashoffset: 478.362; }
25% { stroke-dashoffset: 478.362; }
75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
#keyframes brush2b {
0% { stroke-dashoffset: 203.128; }
80% { stroke-dashoffset: 203.128; }
100% { stroke-dashoffset: 0; }
}
</style>
<!--END ARROW 2-->
</div>

SVG doesn't fill once the animation is over

My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});

Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}

Animation Frames [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Can anyone help me on as to how frame animation is done using js or css. I am actually trying to achieve the same animation as here .I am puzzled as to how the road animation works. Is it any plugin that does this or simply js and css

I did it as an image (SVG) format.
I animate it with pure HTML5 and CSS3 Animation.
With the class .path and #keyframes.
Unfortunately, Is not supported in IE and safari.
Here is the code:
.line{
width: 65%;
margin: 0 auto;
}
svg{
display: block;
}
#svg path.path{
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation:lines 5s linear forwards;
-moz-animation:lines 5s linear forwards;
-ms-animation:lines 5s linear forwards;
-0-animation:lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-webkit-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-moz-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0;}
}
#-ms-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-o-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I hope that will help you and welcome to everyone if can edit my code to support it in IE and safari.

Begin SVG animation when it appears in viewport

I'm having a heck of a time trying to begin the animation when it appears in the viewport. I've searched through previously asked questions here on stack overflow, but I can't seem to figure how to adapt the JS to fit my needs. My latest attempt was to try and just make the pink line begin its animation when it appeared in the viewport... as I imagine once that works, I can apply to the rest of the items. Please let me know if you need anything else. Any ideas? codepen
SVG
<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">
<path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>
<path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>
<path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>
<path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>
<path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>
</svg>
CSS
.pink-stroke {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.pinkAnimation {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.purple-stroke{
fill:none;
stroke:#9E70B0;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.green-stroke{
fill:none;
stroke:#21B585;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: -1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:1.25s;
animation-delay:1.25s;
}
.red-stroke{
fill:none;stroke:#E9706C;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.yellow-stroke {
fill:none;
stroke:#EFEF99;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.45s;
animation-delay:.45s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
JS
var onAppear = [];
document.addEventListener("DOMContentLoaded", function() {
onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
return item;
});
}, false);
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
elem.classList.add(".pinkAnimation");
elem.classList.remove(".pink-stroke")
} else {
elem.classList.remove("pinkAnimation");
elem.classList.add ('.pink-stroke')
}
});
}, false);

I was able to figure this one out... I'm sure there are better options, but it works. I used the following script and updated the corresponding CSS styles to match. Here is the updated codepen.
JS
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
$("#pink").attr("class", "pink-stroke dash-pink");
$("#yellow").attr("class", "yellow-stroke dash-yellow");
$("#red").attr("class", "red-stroke dash-red");
$("#purple").attr("class", "purple-stroke dash-purple");
$("#green").attr("class", "green-stroke dash-green");
} else {
$("#pink").attr("class", "pink-stroke");
$("#yellow").attr("class", "yellow-stroke");
$("#red").attr("class", "red-stroke");
$("#purple").attr("class", "purple-stroke");
$("#green").attr("class", "green-stroke");
}
});

SVG pattern animation and background fade in issue

I am trying to animate an SVG pattern and, once this has finished, to make a background image fading in.
Each of the two effect works fine separately. But when I combine them it looks like the timing is wrong.
I think the actual issue is the SVG being inside the div with opacity:0. This is used to make the background colour fade in, but it means that the SVG isn't not visible straight away.
Is a CSS only solution possible? Or do I need Javascript? And if so, could people make suggestion?
I have simplified the scenario by using a background colour instead of an image.
DEMO
HTML
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
CSS
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
}
.background-image.visible {
opacity: 1;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

You can use a pseudo-element on the background-image div to "underly" the SVG.
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
position: relative;
}
.background-image::before {
content:"";
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
z-index:0;
}
.background-image.visible {
opacity: 1;
}
svg {
position: relative;
z-index:2;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>

We Keep Coding

JavaScript is the programming language of the Web.

SVG and CSS3 Animations not working in IE and Safari - javascript

Related

Play SVG when entering viewport - Browser Support?

SVG doesn't fill once the animation is over

Animation Frames [closed]

Begin SVG animation when it appears in viewport

SVG pattern animation and background fade in issue

Categories

Resources