I have an SVG displayed on my webpage. I declared an animation to animate it. It works fine on Chrome but it doesn't work on Mozilla browser.
Here's my example SVG.
<svg width="400" height="110">
<circle class="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
On my SASS file, I have this sample:
.myCircle
{
animation: animateCircle 5s;
-moz-animation: animateCircle 5s;
-webkit-animation: animateCircle 5s;
-ms-animation: animateCircle 5s;
}
#keyframes animateCircle
{
70% {
cy: 80
}
}
#-moz-keyframes animateCircle
{
70% {
cy: 80
}
}
#-webkit-keyframes animateCircle
{
70% {
cy: 80
}
}
That sample code works on Chrome, but in Mozilla, it just doesn't work as expected.
Here's the codepen:
It's working on chrome but in mozilla, it doesn't even move.
In CSS, values other than 0 must have units. I'm afraid you've found a Chrome bug as the Firefox implementation is correct.
All that moz and webkit stuff isn't needed any more either.
.myCircle
{
animation: animateCircle 5s;
}
#keyframes animateCircle
{
70% {
cy: 80px
}
}
<svg width="400" height="110">
<circle class="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Related
I want to make an animation where each path is displayed one after the other and that over and over again. (Loop)
I have used these 2 Properties:
"animation-delay: 1s;"
and
"animation-iteration-count: infinite;"
:root{
--pink: #e6187e;
--green-100: green;
--white: white;
}
body{
background-color: #1f2937;
}
#keyframes fadeInOut {
0% {opacity: 0;}
100% {opacity: 1;}
}
.octagon.animate{
.octagon_outline1,
.octagon_outline2,
.octagon_outline3{
animation-name: fadeInOut;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.octagon_outline1{animation-duration: 1s; animation-delay: 1s;}
.octagon_outline2{animation-duration: 1s; animation-delay: 2s;}
.octagon_outline3{animation-duration: 1s; animation-delay: 3s;}
}
<svg xmlns="http://www.w3.org/2000/svg" class="octagon animate" viewBox="0 0 500 480">
<path d="m189.06 102.25 120.95-.04 84.83 80.68v114.99l-84.81 80.56H189.05l-84.89-80.55V182.8l84.9-80.55z" class="octagon_center"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="M179.31 79.05 319.7 79l98.46 94.25v134.31l-98.43 94.12H179.3l-98.53-94.1V173.14l98.54-94.09z" class="octagon_outline octagon_outline1"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m165.22 46.51 169.27-.06L453.2 160.33v162.29L334.52 436.34H165.21l-118.8-113.7V160.2L165.22 46.51z" class="octagon_outline octagon_outline2"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="23" d="m150.71 11.57 198.33-.07 139.08 134.29v191.37l-139.05 134.1H150.69L11.5 337.18V145.63L150.71 11.57z" class="octagon_outline octagon_outline3"/>
</svg>
But the command "animation-delay: 1s;" is only shown in the first run and is not used after that.
You can find my code here:
https://codepen.io/bastidesign/pen/eYyxZao
It have to look like this: gif animation Octagon
Could you help me out?
The animation-delay property delays the start of the animation only, but after it’s started it runs continuously. What you want is to have a delay between iterations, which is doable but not using animation-delay, it's not a straightforward thing.
Here's a solution that could get the job done: CSS Keyframe Animation with Delay Between Iterations
I've started drawing a doughnut in SVG. And for some reason my mask doesnt work when I animate the bigger circle.(Bug on Chrome version 90.0.4430.212) I only plan to animate the bigger circle and not the whole SVG/Doughnut (I don't want the smaller circle to animate I only want the bigger circle to scale). How do you animate SVG elements with a mask?
https://codepen.io/markkkkkkk/pen/oNZWOOx
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
transform-origin: 5px 5px;
animation-play-state: paused;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<circle id="myCircle" cx="5" cy="5" r="4" mask="url(#myMask)" />
</svg>
I would still appreciate an answer about animating the element only and keeping the mask steady.
Just wrap your circle in a <g> element, then apply the mask to that instead.
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
Unfortunately, the bug is affecting this as well. Fixed in Chrome 91.0.4472.77
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 5px 5px;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
</svg>
I'm working on an animation of a spinner on a svg.
Unfortunately, I'm having trouble with ie or edge. Every other browser are supported.
Here is the codepen: http://codepen.io/skjnldsv/pen/oxyjoQ
As you can see the opacity animation works, but not the rotate.
Is there some kind of prefix i'm missing, or is the svg support broken in ie/edge?
Thanks
here is the two svg, first one not working, second one is ok.
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50">
<style>
.spinner {
transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
animation: loading-spin .8s infinite linear;
-webkit-animation: loading-spin .8s infinite linear
}
#-webkit-keyframes loading-spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes loading-spin {
100% { transform: rotate(360deg); }
}
</style>
<defs>
<clipPath id="a">
<path d="M0 0h25v25H0z" />
</clipPath>
</defs>
<g fill="none">
<circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" />
<circle class="spinner" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50">
<style>
.spinner2 {
transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
animation: loading-spin2 .8s infinite linear;
-webkit-animation: loading-spin2 .8s infinite linear
}
#-webkit-keyframes loading-spin2 {
100% { opacity:0; }
}
#keyframes loading-spin2 {
100% { opacity:0; }
}
</style>
<defs>
<clipPath id="a">
<path d="M0 0h25v25H0z" />
</clipPath>
</defs>
<g fill="none">
<circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" />
<circle class="spinner2" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" />
</g>
</svg>
Just had the same issue myself. After digging around I found out that CSS transforms in SVG's are not supported by Edge at the moment. It's really annoying but your only option is to use Javascript to animate an SVG on Edge.
You can follow the status of the feature on the Microsoft Edge site.
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/
I've create an SVG loading indicator. It works fine in Chrome et al but I can't seem to get it working in IE10 - here's the fiddle: https://jsfiddle.net/288mu88o/
#keyframes loading {
0% {
fill: red;
}
100% {
fill: yellow;
}
}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15 {
animation: loading 1.5s infinite;
}
.c1 {
animation-delay: 1.4s;
}
.c2 {
animation-delay: 1.3s;
}
.c3 {
animation-delay: 1.2s;
}
...
<g>
<circle fill="#D9E2E7 " cx="294.7" cy="342.1" r="3.5" class="c1" />
</g>
<g>
<circle fill="#D9E2E7 " cx="281.3" cy="344.8" r="3.5" class="c2"/>
</g>
<g>
<circle fill="#D9E2E7 " cx="270.2" cy="352.7" r="3.5" class="c3"/>
</g>
...
What am I missing?
Thanks.
IE 10 does not supprt CSS animation of SVG. You could use a third party solution like Fakesmile
Goal:
I found a tutorial online to make a CSS3 infinite loading icon, using rectangles which grow and shrink in height. They end up appearing like:
It uses 5 divs wrapped in an outer div, and works perfectly. I want to try and recreate the effect using an SVG though, so that I can reference it with just an image, not having to add 5 HTML elements.
What I Have:
I started off with the same CSS animation code, and used 5 rects inside the svg tags. The animation works perfect, but I can't get the rectangles to be centered vertically. Since they are placed using x and y coordinates, which correspond to the top/left point of each rectangle, they are fixed to that location.
<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<rect class="rect1" fill="black" height="30" width="6" x="0" />
<rect class="rect2" fill="black" height="30" width="6" x="10" />
<rect class="rect3" fill="black" height="30" width="6" x="20" />
<rect class="rect4" fill="black" height="30" width="6" x="30" />
<rect class="rect5" fill="black" height="30" width="6" x="40" />
</svg>
rect {
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
alignment-baseline:bottom;
}
.rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
#keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
See Working Example: http://codepen.io/Kelderic/pen/vuipF
One thing that is odd, it's running in CodePen, the same code doesn't run in JSFiddle. It also doesn't run when I embed the CodePen as an SVG.
Question
Is using CSS animations like this supposed to work for SVG elements, and can I fix them in the center to match the original?
Edit
js1568's answer provides what SHOULD be a fix, and it does make things work in Chrome. It has no effect in Firefox though, and after some research I've found that I'm not the only one who has had the same problem with Firefox.
Setting transform-origin on SVG group not working in FireFox
I think the only answer here is that at this time this won't work in all browsers. (If anyone does know a way, feel free to add an answer though!)
Edit 2
I figured a way to make this work in Firefox, explained in an answer below. Still no IE9-11 though.
Okay, so I figured out the answer to this, and it works in Chrome and Firefox. IE doesn't support CSS transforms on SVG elements (though it does support the transform attribute, and I'm trying to figure out a workaround).
Instead of trying to set the baseline to the center of the rect element, I just use a second animation. I move the element up and down, sync'd up time-wise. This creates the appearance that the element is centered vertically.
I had some issues getting it to sync perfectly when using the 0.4 scale, so I changed over to 0.5, which still looks good.
HTML:
<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<rect class="rect1" fill="black" height="30" transform="translate(2,2)" width="6" x="0" y="0" />
<rect class="rect2" fill="black" height="30" width="6" x="10" y="0" />
<rect class="rect3" fill="black" height="30" width="6" x="20" y="0" />
<rect class="rect4" fill="black" height="30" width="6" x="30" y="0" />
<rect class="rect5" fill="black" height="30" width="6" x="40" y="0" />
</svg>
CSS:
#-webkit-keyframes stretchdelay {
0% {
-webkit-transform: scaleY(1.0) translate(0,0);
} 30%,70% {
-webkit-transform: scaleY(0.5) translate(0,15px);
} 100% {
-webkit-transform: scaleY(1.0) translate(0,0);
}
}
#keyframes stretchdelay {
0% {
transform: scaleY(1.0) translate(0,0);
-webkit-transform: scaleY(1.0) translate(0,0);
} 30%,70% {
transform: scaleY(0.5) translate(0,15px);
-webkit-transform: scaleY(0.5) translate(0,15px);
} 100% {
transform: scaleY(1.0) translate(0,0);
-webkit-transform: scaleY(1.0) translate(0,0);
}
}
rect {
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
-ms-animation: stretchdelay 1.2s infinite ease-in-out;
}
.rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
Result:
(Note, recently CodePen added a feature allowing you to embed SVGs created inline as SVG images. I found out today as I created this, that all CSS must be placed in <style> tags inside the HTML input box. If it is placed in the CSS box, it won't work.)
I have edited your codepen to include transform-origin styles:
http://codepen.io/anon/pen/ojgwr
Is this the effect you were going for?