animation svg not working on edge/IE - css

I'm trying to create a animation of a svg path and is working well on chrome/firefox but on edge/IE is not.
The code is the follow:
.pathNivel1, .pathNivel2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-ms-transform: dash 2s forwards infinite;
animation: dash 2s forwards infinite;
}
#-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.cls-2, .cls-3, .cls-4, .cls-7, .cls-8 {
fill: none;
}
.cls-2 {
stroke: #497faa;
}
.cls-3 {
stroke: #69c;
}
.cls-2, .cls-3, .cls-4, .cls-8 {
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-2, .cls-3, .cls-4 {
stroke-width: 65px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="470.85">
<g>
<path class="cls-3 pathNivel2" d="m39.200012,153.566565a82.68,82.68 0 0 1 82.67,82.68" />
</g>
</svg>
What is wrong or missing?
Thx,
Best regards
...........................................................................

I found a solution on css-tricks on comment of Amelia BR.
.path {
stroke-dasharray: 0 1000;
/*stroke-dashoffset: 1000; /* NOT NEEDED */
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dasharray: 0 1000; /* zero-length stroke,
1000-length gap */
}
to {
stroke-dasharray: 1000 0;/* 1000-length stroke,
zero-length gap */
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

Related

How to get handwriting animation with irregular SVG Strokes using JS and CSS?

I have followed this tutorial to get to where I am. So far, I have the animation working for the mask layer. The only issue is that I cannot change the .mask stroke color to #fff like the tutorial. Once I do that, the mask layer seems to disappear and nothing is animated.
Can someone help me understand why I can't make the lines in the "M" look like they are being drawn by the animation?
const masks = ["M"];
masks.forEach((mask, index, el) => {
const id = `#Mask-${mask}`;
let path = document.querySelector(id);
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
});
.Character {
cursor: pointer;
position: absolute;
fill: #000000;
left: 0;
top: 0;
}
#Char-M {
mask: url(#Mask-M);
}
.mask {
fill: none;
stroke: #333;
stroke-miterlimit: 10;
stroke-width: 171px;
stroke-linecap: round;
stroke-linejoin: bevel;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
#keyframes strokeOffset {
to {
stroke-dashoffset: 0;
}
}
#Mask-M {
animation: strokeOffset 3s linear infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.4 535.94">
>
<g id="Mask-Layer">
<g id="Mask">
<path id="Mask-M" class="mask" d="M90.89,534.25l-4-412c-.54-16.52-4.5-27.17,4-13l165.23,232.5A28.56,28.56,0,0,0,303,341.3L455.79,95.19c9.49-15.28,18.5-11.92,18.1,6.06l-6,433.5"/>
</g>
</g>
<g id="Character-Layer">
<g id="Character">
<path id="Char-M" data-name="M" d="M241.39,405.9H216L35.81,102.69V526.41H13.18V64.48H38.64Zm-183-236.54L81,207.58V526.41H58.45ZM292.59,405.9H266.87L64.39,64.48H90.17ZM103.72,245.75l22.67,38V526.41H103.72Zm420-143.1L343.58,405.9H317.8L115.66,64.48h25.47L331,384.75,520.56,64.53h25.83V526.41H523.76ZM149,322.22l22.63,37.94V526.41H149Zm151.52-17.57-13.2-21.2,130.77-219h25.78Zm26.09,43.79-12.89-20.92,155.93-263H495.1Zm61.3,9.48L410.54,320V526.41H387.9Zm45.27-77L455.81,243V526.41H433.17ZM478.44,205l22.63-38.21V526.41H478.44Z"/>
</g>
</g>
</svg>
Well, you don't necessarily need a mask, you can just progressively uncover the underlying character by moving the stroke-dasharray of a duplicate over-drawing. Here's a simplified version of yours showing how this would work.
There are some nasty drawing artifacts (in Chrome at least) - because very large strokes often have bad rendering artifacts when you combine them with stroke dash arrays and miters/end-caps. But it does work.
.mask {
stroke: #fff;
fill: none;
stroke-width: 171px;
stroke-dasharray: 1600 1600;
stroke-dashoffset: 3200;
}
#keyframes strokeOffset {
to {
stroke-dashoffset: 1600;
}
}
#Mask-M {
animation: strokeOffset 3s linear infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.4 535.94">
<g id="Character-Layer">
<g id="Character">
<path id="Char-M" data-name="M" d="M241.39,405.9H216L35.81,102.69V526.41H13.18V64.48H38.64Zm-183-236.54L81,207.58V526.41H58.45ZM292.59,405.9H266.87L64.39,64.48H90.17ZM103.72,245.75l22.67,38V526.41H103.72Zm420-143.1L343.58,405.9H317.8L115.66,64.48h25.47L331,384.75,520.56,64.53h25.83V526.41H523.76ZM149,322.22l22.63,37.94V526.41H149Zm151.52-17.57-13.2-21.2,130.77-219h25.78Zm26.09,43.79-12.89-20.92,155.93-263H495.1Zm61.3,9.48L410.54,320V526.41H387.9Zm45.27-77L455.81,243V526.41H433.17ZM478.44,205l22.63-38.21V526.41H478.44Z"/>
</g>
</g>
<g id="Mask-Layer">
<g id="Mask">
<path id="Mask-M" class="mask" d="M90.89,534.25l-4-412c-.54-16.52-4.5-27.17,4-13l165.23,232.5A28.56,28.56,0,0,0,303,341.3L455.79,95.19c9.49-15.28,18.5-11.92,18.1,6.06l-6,433.5"/>
</g>
</g>
</svg>

how can i animate svg svg stroke line animation from left to right?

svg stroke animate start from right, but i want to stroke that animate form left to right. After animating stroke remain stands. can add any animate css class like fadeIn during the animation
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>
You can make the stroke-dashoffset a negative value:
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: -1800;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>

SVG Signature Animation Issues

I'm basically trying to use CSS to make this SVG signature animation happen for my own SVG signature: https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846
I've got it close, but for some reason it's drawing the outline of the SVG image, instead of the strokes of the SVG itself? I'm not sure what I'm doing wrong. Here's what I've got:
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
#keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}
<div class="signature">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 591.3 429.4" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c53.5-7.3,104.9-28.2,148.7-59.7c44.1-31.7,79.6-74.2,104.2-122.5c13.8-27.1,24.2-55.8,31.5-85.4
c-1-0.1-2-0.3-2.9-0.4c-6.4,51.9-10.7,109.6,24.8,152.7c1.1,1.3,3.2-0.4,2.4-1.8c-9.3-16.7-25.7-27.6-42.3-36.3
c-19.1-10.1-39.2-18.9-59.5-26.3C169.2,83.5,125.8,75.6,84.4,87c-19.4,5.3-37.9,14.9-51.4,30c-1.3,1.4,0.8,3.6,2.1,2.1
c24.6-27.5,64.8-36.2,100.4-34.4c43.3,2.2,84.9,19.5,123.4,38.3c18.8,9.2,38.6,20.4,49.1,39.3c0.8-0.6,1.6-1.2,2.4-1.8
c-34.9-42.3-30.2-99.6-23.9-150.5c0.2-1.7-2.5-2-2.9-0.4c-13,52.7-36.2,103-70.3,145.4c-33,41-75.7,73.6-123.8,95
c-28,12.5-57.8,20.9-88.2,25.1C-0.8,275.2,0,278.1,1.9,277.9L1.9,277.9z"/>
</g>
</g>
<g>
<g>
<path class="stroke-mber" d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9c3,1.4,6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2c-12.1-15.7,11.2-29.8,21.6-37.6
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>
As far as i can see it, the problem is your svg-file.
Just go back to your illustration-tool and recreate your signature with just a colored path and no fill. Then your animation will just move along this path and not around it.
I did just with the "A" in the example below.
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
#keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}
<div class="signature">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 591.3 429.4" style="enable-background:new 0 0 591.3 429.4;" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c0,0,217-19.4,281.7-268.3c0,0-14.1,118,27,151.2c0,0-158.3-140.8-277.6-43.8"/>
</g>
</g>
<g>
<g>
<path
class="stroke-mber"
d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9s6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2C536.3,104.9,559.6,90.8,570,83
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>

Start and end of stroke animation

What I want is in green And what I already have Is in red in the image. And I want it to be done in CSS animation. The edge of the triangle (start and end of stroke) should be angled like in picture.
My so far code is :
.path {
stroke-dasharray: 504;
animation: dash 2.5s linear infinite;
-webkit-animation: dash 2.5s linear infinite;
-moz-animation: dash 2.5s linear infinite;
-ms-animation: dash 2.5s linear infinite -o-animation: dash 2.5s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
stroke-width: 30;
}
50% {
stroke-dashoffset: 500;
stroke-width: 30;
}
100% {
stroke-dashoffset: 1000;
stroke-width: 30;
}
}
div svg {
width: 20%;
}
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252.7 251.9" style="enable-background:new 0 0 252.7 251.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<g>
<path stroke="#C5C5C5" stroke-width="20" stroke-linejoin="square" stroke-linecap="butt" class="path" d="M151 45 L79 200 L213 200 L152.324 50 L156 45" fill="url(#fagl)" />
</g>
</svg>
</div>
The issue you are facing is the way the stoke end is rendered. I am not aware of a way to make it end exaclty at the angle you need. None of the stoke-linecap values would fit.
You should also note that the path element in your SVG doesn't have the same start and end points.
Workaround:
A way would be to make the path go further than you need it and hide the overflow with clipPath. This way, the sroke will end at the desired angle:
.path {
stroke-dasharray: 23;
animation: dash 2.5s linear infinite;
}
#keyframes dash {
to { stroke-dashoffset: -46; }
}
svg { width: 20%; }
<svg viewBox="0 0 10 10">
<clipPath id="clip">
<path d="M5 1 L8 9 H2z" />
</clipPath>
<path stroke="#C5C5C5" stroke-width="2" class="path" d="M5 1 L8 9 H2 L5 1" fill="url(#fagl)" clip-path="url(#clip)" />
</svg>
Note that I also simplified your SVG and CSS
If you change the 45 values to 60 (the degrees) in your path it will give you the output you desired AFAICT
Snippet
.path {
stroke-dasharray: 504;
animation: dash 2.5s linear infinite;
-webkit-animation: dash 2.5s linear infinite;
-moz-animation: dash 2.5s linear infinite;
-ms-animation: dash 2.5s linear infinite -o-animation: dash 2.5s linear infinite;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
stroke-width: 30;
}
50% {
stroke-dashoffset: 500;
stroke-width: 30;
}
100% {
stroke-dashoffset: 1000;
stroke-width: 30;
}
}
div svg {
width: 20%;
}
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252.7 251.9" style="enable-background:new 0 0 252.7 251.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<g>
<path stroke="#C5C5C5" stroke-width="20" stroke-linejoin="square" stroke-linecap="butt" class="path" d="M151 60 L79 200 L213 200 L152.324 50 L156 60" fill="url(#fagl)" />
</g>
</svg>
</div>

CSS how to revert SVG animation on mouseout from current frame

I'm doing some button animation with SVG and can't make it to work exactly I want. I tried find same case but no luck. So I end up here, because I spend too much time on this already. Any help would be much appreciated.
Here is the code: http://jsfiddle.net/wq4djg9z/2/
It works fine, but with one flaw. It's always starts animation from fixed value.
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
}
#button-border:hover {
-webkit-animation: dash 1.0s linear forwards;
pointer-events: all;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
Is there a way to start animation from current animation frame when mouse out the button to smooth animation?
What about using transitions instead of animations to do the reverse part ?
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
transition: stroke-dashoffset 1s linear;
-webkit-transition: stroke-dashoffset 1s linear;
}
#button-border:hover {
stroke-dashoffset: 0;
pointer-events: all;
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
#keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.00000" height="50.00000" id="svg1" version="1.1" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<style type="text/css">
<![CDATA[]]>
</style>
<g id="button-border">
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 100,50.0 0,-50.00000 -100,00.00000" id="path2983" />
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 0,0 0,50 100,0" id="path2984" />
<text x="30" y="30" font-family="Verdana" font-size="15" fill="blue">Hello</text>
</g>
</svg>

Resources