So I have two classes(firstCircle & spin) on the First circle on the left and I'm trying to get it to rotate in place.(removed them from css so you can see the circle) I'm getting confused on transform-origin: What is wrong with my code.It's rotating way out of place instead of spinning. I added a width and height and tried transform-origin and it just makes it disappear.
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 1120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
transform-origin: center center;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
.container { padding:auto;
width: auto;
height: auto;
text-align:center; }
.line1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.13s;
}
.line2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.5s;
}
.line3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3s;
}
.line4 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.4s;
}
.line5 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.9s;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.insidefirstCircle {
stroke-dasharray: 1000;
stroke-dashoffset: 100;
animation: insideCircle 10s linear forwards;
animation-delay: 1.2s;
}
#keyframes insideCircle {
from {
stroke-dashoffset: 1000;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.secondCircle {
animation: secondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes secondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.insidesecondCircle {
animation: insidesecondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes insidesecondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<svg>
<path class="firstCircle spin"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
id="path7158"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<path class="insidefirstCircle"
transform="matrix(-0.22033261,-0.9754248,-0.97735568,0.21160309,0,0)"
d="m -102.55362,-32.142649 a 7.185163,7.442451 0 0 1 5.829705,7.489633 7.185163,7.442451 0 0 1 -6.173275,7.188196 7.185163,7.442451 0 0 1 -7.86062,-5.124812"
id="path7160"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35700712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<ellipse class="secondCircle"
ry="5.8064542"
rx="5.806459"
transform="rotate(-9.0228844)"
cy="102.10918"
cx="31.181959"
id="path7162"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.38561434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle class="insidesecondCircle"
r="2.081239"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.138;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7192"
cx="46.80978"
cy="95.955421" />
<circle class="line1"
r="8.1839027"
cy="124.84148"
cx="88.252518"
id="path7166"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.63219434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:3.454;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7168"
cx="88.252518"
cy="124.84148"
r="4.5812778" />
<circle
r="6.7396846"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.52063066;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7174"
cx="128.74611"
cy="90.168755" />
<path
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="path7186"
d="m -180.38976,-169.87182 a 20.505369,19.487934 0 0 1 27.64196,8.28339 20.505369,19.487934 0 0 1 -8.68637,26.27924 20.505369,19.487934 0 0 1 -27.66048,-8.22736 20.505369,19.487934 0 0 1 8.62739,-26.29677"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" />
<ellipse
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="ellipse7190"
cx="152.20651"
cy="155.0309"
transform="matrix(0.98886074,-0.14884364,0.16522023,0.9862567,0,0)"
rx="5.5144606"
ry="5.2409396" />
<circle
cy="90.168755"
cx="128.74611"
id="circle7196"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.13800001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
r="2.081239" />
<path class="line1"
id="path875"
d="m 19.085467,74.174836 c 22.366283,17.178223 22.335724,17.75844 22.335724,17.75844"
style="fill:none;stroke:#4fae7d;stroke-width:0.28233331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line2"
style="fill:none;stroke:#4fae7d;stroke-width:0.36648375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 51.183439,99.59881 c 29.032633,22.29825 28.992966,23.0514 28.992966,23.0514"
id="path885" />
<path class="line3"
id="path879"
d="M 95.534634,121.46865 C 123.9702,95.423153 123.73736,94.872744 123.73736,94.872744"
style="fill:none;stroke:#4fae7d;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line4"
id="path881"
d="m 134.621,93.468564 c 37.14699,33.672096 37.14699,33.672096 37.14699,33.672096"
style="fill:none;stroke:#4fae7d;stroke-width:0.26971px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line5"
id="path883"
d="m 181.40295,129.52127 c 31.40453,-10.83262 31.9066,-11.93052 31.9066,-11.93052"
style="fill:none;stroke:#4fae7d;stroke-width:0.37912115px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>
</div>
</body>
</html>
Firstly, most of the CSS properties you have in your .spin and firstCircle definitions are invalid. position, top, 'left, and margin are all HTML-only properties. And width and height are not valid for <path> elements.
It is important to remember that SVG is a totally different standard from HTML and works differently.
Secondly, your path already has a transform. CSS transforms don't add, so any transform in your animation, will overwrite the one on your <path>.
The simplest way to resolve that problem is to either (a) get your SVG editor to multiply through the transform to the path coordinates; or (b) work around it by using a nested group <g> element around the path. One of the transforms is applied to that, and the other is applied to the path.
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="..." />
</g>
transform-origin
Now that those issues are resolved, we can deal with the matter of the centre-of-rotation.
There are issues with browser compatibility with transform-origin. Chrome has an implementation that is out-of-date with respect to the specification. That is in the process of getting fixed, but for now, the workaround is to always use absolute coordinates instead of percentage values.
The centre of your circle is at (-19.5, -91.7), so the correct transform-origin to use is:
transform-origin: -19.5px -91.7px;
So if we plug this into a working example:
.spin {
transform-origin: -19.5px -91.7px;
animation:spin 4s linear infinite;
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
<svg>
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</g>
</svg>
I've been trying to create a donut chart not too dissimilar to this example here: https://jsfiddle.net/4azpfk3r/
HTML:
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
CSS
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
#-webkit-keyframes html {
to {
stroke-dashoffset: 80;
}
}
#keyframes html {
to {
stroke-dashoffset: 80;
}
}
#-webkit-keyframes css {
to {
stroke-dashoffset: 160;
}
}
#keyframes css {
to {
stroke-dashoffset: 160;
}
}
However, in both the above example, and my altered version I have trouble running them in IE 11 and Edge. I'm fairly certain it is due to the animation on the stroke-dashoffset but I'm not sure if there is any work around.
Note: I have already tried adding the line below as some similar questions have suggested but this provides no change in the behaviour
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE11 does not support CSS animations of SVG elements. So you would need to use a different approach if you want to support non-Edge IE.
However Edge has supported CSS animations of SVG elements since build 10240.
The reason your animations aren't working on Edge is because Edge insists that you include units with CSS values. Other browsers are more forgiving with SVG values.
So to fix, add px to all your dasharray and dashoffset values.
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
#keyframes html {
to {
stroke-dashoffset: 80px;
}
}
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
#-webkit-keyframes html {
to {
stroke-dashoffset: 80px;
}
}
#keyframes html {
to {
stroke-dashoffset: 80px;
}
}
#-webkit-keyframes css {
to {
stroke-dashoffset: 160px;
}
}
#keyframes css {
to {
stroke-dashoffset: 160px;
}
}
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
I'm working on SVG animations with CSS and I've noticed that with my line drawing animations, any SVG rect (#clipboard-border and #clipboard-clip-border) stroke always excludes a bit of the top-left corner, which makes it an incomplete rectangle.
I've tried adjusting the stroke-dasharray and stroke-dashoffset measurements within the CSS, as well as adjusting the sizes and pixel coordinated within the SVG code, but neither are the problem it seems. Help?
html,
body {
width: 100%;
height: 100%;
background-color: #CECECE;
}
div {
text-align: center;
}
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
}
/* ---------------------
SVG RULES
--------------------- */
/* All grey strokes */
#clipboard-border,
.clipboard-content,
.clipboard-borders,
.mech-pencil-borders {
fill: none;
stroke: #4D5152;
stroke-width: 6;
stroke-miterlimit: 10;
}
/* All things white */
#clipboard-paper-fill,
#mech-pencil-eraser-fill {
fill: #F3F7F6;
}
/* All things green */
#mech-pencil-point-fill,
#mech-pencil-top-fill {
fill: #25B686;
}
/* All things blue */
#clipboard-fill {
fill: #85D0D3;
}
/* All things yellow */
#clipboard-clip-fill,
#mech-pencil-grip {
fill: #FBFBCE;
}
#clipboard-knob-1,
#clipboard-knob-2,
#clipboard-knob-3,
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
stroke-dasharray: 8px;
stroke-dashoffset: 8px;
animation: trace .5s ease-out forwards;
}
/* ---------------------
ANIMATION KEYFRAMES
--------------------- */
#keyframes trace {
100% {
stroke-dashoffset: 0px;
}
}
#keyframes fill-it {
100% {
opacity: 1;
}
}
#keyframes grow {
0% {
transform: scale(0);
}
30% {
transform: scale(1.1);
}
60% {
transform: scale(.9);
}
}
/* ---------------------
SVG ANIMATION: INSIGHT & PLANNING ICON
--------------------- */
#clipboard-clip-border {
stroke-dasharray: 180px;
stroke-dashoffset: 180px;
animation: trace .2s ease-out forwards;
}
#clipboard-clip-fill {
opacity: 0;
animation: fill-it .2s .2s ease-in-out forwards;
}
#clipboard-border {
stroke-dasharray: 640px;
stroke-dashoffset: 640px;
animation: trace 1.25s ease-in-out forwards;
}
#clipboard-fill,
#mech-pencil-point-fill,
#mech-pencil-top-fill {
opacity: 0;
animation: fill-it .25s 1.25s ease-in-out forwards;
}
#clipboard-paper-border {
stroke-dasharray: 400px;
stroke-dashoffset: 400px;
animation: trace 1s ease-out forwards;
}
#clipboard-paper-fill,
#mech-pencil-eraser-fill,
#mech-pencil-grip {
opacity: 0;
animation: fill-it .75s 1s ease-in-out forwards;
}
#clipboard-content-line-1 {
stroke-dasharray: 30px;
stroke-dashoffset: 30px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line-7,
#clipboard-clip-detail {
stroke-dasharray: 52px;
stroke-dashoffset: 52px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line,
#clipboard-content-line-even,
#mech-pencil-eraser-border {
stroke-dasharray: 80px;
stroke-dashoffset: 80px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-border-left,
#mech-pencil-border-right {
stroke-dasharray: 115px;
stroke-dashoffset: 115px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-point-border {
stroke-dasharray: 60px;
stroke-dashoffset: 60px;
animation: trace .5s ease-out forwards;
}
#mech-pencil-tip,
#mech-pencil-top {
stroke-dasharray: 10px;
stroke-dashoffset: 10px;
animation: trace .4s ease-out forwards;
}
/* ---------------------
ANIMATION DELAYS
--------------------- */
#clipboard-knob-1,
#clipboard-knob-2 {
animation-delay: .25s;
}
#clipboard-clip-detail,
#clipboard-content-line,
#clipboard-content-line-7,
#clipboard-knob-2 {
animation-delay: .5s;
}
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
animation-delay: 1.25s;
}
<div class="wrapper">
<!-- INSIGHT & PLANNING ICON -->
<svg id="insight-planning" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<g class="clipboard">
<rect id="clipboard-fill" x="15.015" y="11.44" width="132" height="182" />
<rect id="clipboard-paper-fill" x="30.753" y="11.44" width="100" height="151" />
<g class="clipboard-content">
<line id="clipboard-content-line-even" x1="46.491" y1="68.096" x2="115.738" y2="68.096" />
<line id="clipboard-content-line" x1="46.491" y1="80.687" x2="115.738" y2="80.687" />
<line id="clipboard-content-line-even" x1="46.491" y1="93.277" x2="115.738" y2="93.277" />
<line id="clipboard-content-line" x1="46.491" y1="105.867" x2="115.738" y2="105.867" />
<line id="clipboard-content-line-even" x1="46.491" y1="118.458" x2="115.738" y2="118.458" />
<line id="clipboard-content-line-7" x1="46.491" y1="131.048" x2="96.852" y2="131.048" />
<line id="clipboard-content-line-1" x1="115.738" y1="49.211" x2="90.557" y2="49.211" />
</g>
<rect id="clipboard-border" x="15.015" y="11.44" width="132" height="182" />
</g>
<g class="mech-pencil-fills">
<rect id="mech-pencil-grip" x="166.099" y="96.425" width="18" height="47" />
<rect id="mech-pencil-top-fill" x="166.099" y="30.325" width="18" height="66" />
<rect id="mech-pencil-eraser-fill" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-fill" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
</g>
<g class="mech-pencil-borders">
<line id="mech-pencil-border-left" x1="166.099" y1="143.639" x2="166.099" y2="30.325" />
<line id="mech-pencil-border-right" x1="184.985" y1="30.325" x2="184.985" y2="145" />
<rect id="mech-pencil-eraser-border" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-border" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
<line id="mech-pencil-top" x1="175.542" y1="11.44" x2="175.542" y2="1.997" />
<line id="mech-pencil-tip" x1="175.542" y1="168.819" x2="175.542" y2="175.114" />
<line id="mech-pencil-bottom-btn" x1="175.542" y1="127.901" x2="175.542" y2="121.605" />
<line id="mech-pencil-top-btn" x1="175.542" y1="115.31" x2="175.542" y2="109.015" />
</g>
<g class="clipboard-clip">
<rect id="clipboard-clip-fill" x="49.639" y="5.144" width="62" height="25" />
</g>
<g class="clipboard-borders">
<polyline id="clipboard-paper-border" points="131.476,11.44 131.476,162.524 30.753,162.524 30.753,11.44" />
<rect id="clipboard-clip-border" x="49.639" y="5.144" width="62" height="25" />
<line id="clipboard-clip-detail" x1="59.081" y1="17.735" x2="103.148" y2="17.735" />
<line id="clipboard-knob-1" x1="65.376" y1="178.262" x2="71.672" y2="178.262" />
<line id="clipboard-knob-2" x1="77.967" y1="178.262" x2="84.262" y2="178.262" />
<line id="clipboard-knob-3" x1="90.557" y1="178.262" x2="96.852" y2="178.262" />
</g>
</svg>
</div>
Also posted in Codepen.
Just add stroke-linecap: square; to the CSS declarations for the SVG object.
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
stroke-linecap: square; /* <-- Add this */
}
Example:
Here's an SVG with two paths (open, not closed). The path drawn with "butt" line endings has a bit missing in the top corner, but the other path (drawn with "square" line endings) doesn't have this issue.
<svg width="250" height="100" viewBox="0 0 250 100">
<path d="M10 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: square;"/>
<text x="50" y="70" text-anchor="middle">Square</text>
<path d="M160 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: butt;"/>
<text x="200" y="70" text-anchor="middle">Butt</text>
</svg>
P.S. I like your work, but next time please consider making a minimal, complete and verifiable example to illustrate the problem. That way people won't have to wade through reams of code to discover what's going wrong :-)
I've been trying to find a modern google loader which is cross browser.
Can anyone please help me find one, i found this one which works for all except Internet Explorer, or maybe tell me how i can get this one to work in IE ?
I tried fakesmile but it didnt work.
HTML :
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
CSS :
.loader {
position: relative;
margin: 0px auto;
width: 100px;
height: 100px;
zoom: 1;
}
.circular {
animation: rotate 1s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke: gray;
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite;
stroke-linecap: round;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
Older versions of IE do not support the keyframes, i left IE behind.
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>