SVG loader not spinning correctly in Firefox - html

I'm trying to update an svg loader from a smil animation to a css animation.
This is the original svg and the CSS animations:
svg path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
It looks correct in Chrome but all wrong in Firefox and I can't understand why (try the Codepen here to see what I mean). Any ideas why?


It doesn't work for me in Chrome either. At least not with recent Chromes anyway - which have a correct implementation of transform-origin.
#loader-2 path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
<svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/>
</svg>
The problem is that, in SVGs, the percentage transform-origin coordinates are calculated relative to the whole SVG. Not the element they are used on.
So transform-origin: 100% 100%; here means the bottom right of the SVG. Not the bottom right of <path>.
The fix is to tell the browser that you want the origin to be calculated ralative to the path. You do that with the following property:
transform-box: fill-box;
Demo:
#loader-2 path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
transform-box: fill-box;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
<svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/>
</svg>


Trow away your svg =))
.loader
{
width:50px; height:50px;
border:solid 7px transparent;
border-top-color:rgba(0, 0, 0, .87);
border-radius:55%;
animation: spin 1s linear infinite;
}
#keyframes spin
{
100% {transform:rotateZ(360deg)}
}
<hr class="loader">

Related

Text on a Circle Path around an SVG Image

I'm attempting to have animated text moving on a circular path around an image. I have the circular text, but I can't get the image on the inside.
Here is the code I'm using:
<div id="container">
<div id="circle">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="200px"
height="200px"
viewBox="0 0 400 400"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>
Here is the full code on JSFiddle I created.
The svg I'm trying to place in the middle is this: https://svgshare.com/i/Z4d.svg
Any help would be appreciated.

You could achieve this with the image tag:
<image
x="165"
y="150"
width="88"
height="100"
xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>
or (like in your linked svg)
<image
...
xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>
To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:
#circle svg text {
transform-origin: 50% 50%;
animation-name: rotate;
...
}
Working example: (i removed the circle because it wasn't used)
Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.
#container {
margin: 0%;
margin-top: 0px;
margin-bottom: 0px;
}
#circle {
position: relative;
width: 500px;
padding-bottom: 0%;
overflow: visible;
z-index: 2;
}
#circle text {
margin: 0 calc(.14em * -1) 0 0;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: .83em;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: black;
background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
background-size: 100% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
letter-spacing: .32em;
}
#circle svg {
position: absolute;
left: 140px;
top: -110px;
width: 100%;
height: 430px;
}
#circle svg text {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#media screen and ( max-width: 979px) {
#circle svg {
left: 0px !important;
top: -70px !important;
height: 360px;
}
}
#media screen and ( max-width: 480px) {
#circle svg {
left: -140px !important;
top: 140px !important;
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<g>
<use xlink:href="#circlePath" fill="none"/>
<rect
x="160"
y="160"
width="80"
height="80"
fill="#FCDB8D"
/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>

Fill font awesome icon with loading animation

Issue
I am trying to use a font awesome icon fas fa-cannabis and add a fill effect, now I have part of the CSS down, I can see the loading animation but I can't get it to fill inside the font awesome icon. So all I basically want to do is put that fill effect that you can see below inside of the font awesome icon.
Here is the CodePen for the question
At the moment it is sitting underneath the font awesome icon. Which you can see below:
Code
So my HTML is as follows:
<i class="fas fa-cannabis" id="banner">
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</i>
With the following CSS that is creating the fill effect:
#banner {
width: 150px;
height: 150px;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}

You can use mix-blend-mode:screen; For this I'm wrapping both the i and the fill in a div and set i{position:absolute}. Please take a look at the codepen demo
#wrap{height: 150px;
width:150px;
overflow: hidden;
border:1px solid;
}
#banner {
height: 150px;
width:150px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
mix-blend-mode:screen;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
i{font-size:147px; background:#fff;}
#wrap i{position:absolute}
<div id="wrap">
<i class="fas fa-cannabis" id="banner"></i>
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>

You might need to use clipping paths to apply the fill only to the icon. You might also need to use an svg rather than an icon...
This article has some interesting info that may help: https://css-tricks.com/masking-vs-clipping-use/

Filling a rotating circular SVG with a pattern image

So i've got this text that rotates around this circle using SVG. I'd like to fill it with an image to make it less bland. This is the code I have in my HTML.
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait'>
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>
And this is the CSS defining speed and browser support.
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
#keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
I've tried a couple of different methods of trying to fill the inside circle but nothing ever seems to make a difference. Any help would be sorely appreciated!

add patternUnits="userSpaceOnUse" height="380" width="267" in my_portrait
and also add fill="url(#my_portrait)" in circlePath
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
#keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait' patternUnits="userSpaceOnUse" height="380" width="267">
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " fill="url(#my_portrait)" />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>

SVG rotate animation lagging

If you take a look at the pic below, I have two animations running: the outer ring is slowly rotating clockwise and the inner ring is rotating counter-clockwise. It works great in Chrome, but in Safari, the animation lags and is not as smooth as it is in Chrome. Any ideas to why it's lagging in Safari?
body.home {
background-image: url('http://uploadpie.com/5Fy2h');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 800px;
}
////////////////////
//LOGO ANIMATIONS//
///////////////////
svg {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
svg mask rect {
fill: rgba(255, 255, 255, 0.8);
}
svg > rect {
fill: white;
}
#mask {
position: relative;
right: 250px;
}
.last-overlay {
fill: rgba(255, 255, 255, 0.5);
}
.first-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: translateZ(0);
}
}
#-moz-keyframes rotate {
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
100% {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.second-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate-counter;
-moz-animation-name: rotate-counter;
-ms-animation-name: rotate-counter;
-o-animation-name: rotate-counter;
animation-name: rotate-counter;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate-counter {
100% {
-webkit-transform: rotate(-360deg);
}
}
#-moz-keyframes rotate-counter {
100% {
-moz-transform: rotate(-360deg);
}
}
#-o-keyframes rotate-counter {
100% {
-o-transform: rotate(-360deg);
}
}
#-ms-keyframes rotate-counter {
100% {
-ms-transform: rotate(-360deg);
}
}
#keyframes rotate-counter {
100% {
transform: rotate(-360deg);
}
}
<body class="home">
<!-- LOGO ANIMATION -->
<svg id="logo-svg" preserveAspectRatio="xMidYMid slice">
<svg version="1.1" id="logo-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" xml:space="preserve">
<rect class="last-overlay" x="0" y="0" width="100%" height="100%" />
<mask id="mask" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" />
<svg x="-45%" y="5%" class="logo-animation-container">
<svg class="svg-path" version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 270" xml:space="preserve">
<g id="pathRotate" class="first-ring-path">
<g>
<g>
<path d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9
c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2
C163.1,230.9,141.1,237.5,118.4,237.5z" />
</g>
<g>
<path d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3
c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z" />
</g>
<g>
<path d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9
c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1
C218.1,181,216.4,181.9,214.6,181.9z" />
</g>
<g>
<path d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1
c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z" />
</g>
<g>
<path d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8
s4.2-3.8,6.8-2.7c17.9,7.8,33.7,20.2,45.7,35.7c1.7,2.3,1.3,5.5-0.9,7.2C208.6,58.3,207.5,58.7,206.4,58.7z" />
</g>
<g>
<path d="M41,46.7c-1.3,0-2.7-0.5-3.7-1.6c-2-2-1.9-5.3,0.1-7.3C59.2,16.6,88,5,118.4,5c1.6,0,3.2,0,4.7,0.1
c2.9,0.1,5.1,2.5,5,5.4c-0.1,2.9-2.5,5.1-5.4,5c-1.4-0.1-2.9-0.1-4.3-0.1c-27.7,0-53.9,10.6-73.7,29.9
C43.6,46.2,42.3,46.7,41,46.7z" />
</g>
<g>
<path d="M7.5,119c-0.1,0-0.2,0-0.4,0c-2.8-0.2-5-2.7-4.8-5.5c0.3-4,0.8-8.1,1.5-12.1C6,88.3,10.5,75.7,17,64.2
c1.4-2.5,4.6-3.4,7-2c2.5,1.4,3.4,4.6,2,7c-5.9,10.5-10,21.9-12.1,33.9c-0.6,3.6-1.1,7.4-1.3,11C12.4,116.9,10.2,119,7.5,119z" />
</g>
<g>
<path d="M58.6,220c-1,0-1.9-0.3-2.8-0.8c-26.2-16.7-44.8-43.7-51.2-74c-0.6-2.8,1.2-5.5,4-6.1s5.5,1.2,6.1,4
c5.8,27.6,22.8,52.1,46.6,67.4c2.4,1.5,3.1,4.7,1.6,7.1C61.9,219.2,60.3,220,58.6,220z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" 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 270 270" xml:space="preserve">
<g class="second-ring-path">
<g>
<g>
<path d="M31.9,147.9c-2.5,0-4.8-1.7-5.4-4.3c-1.8-7.3-2.7-14.8-2.7-22.3c0-7.8,1-15.5,2.8-23c0.8-3,3.8-4.8,6.8-4
c3,0.8,4.8,3.8,4,6.8c-1.7,6.6-2.5,13.4-2.5,20.3c0,6.6,0.8,13.3,2.3,19.7c0.7,3-1.1,6-4.1,6.7C32.8,147.8,32.4,147.9,31.9,147.9
z" />
</g>
<g>
<path d="M117.7,215.2c-29.9,0-57.4-13.8-75.3-37.8c-1.8-2.5-1.3-6,1.1-7.8c2.5-1.8,6-1.3,7.8,1.1
c15.8,21.2,40,33.3,66.4,33.3c6,0,12-0.6,17.8-1.9c3-0.7,6,1.2,6.7,4.3c0.7,3-1.2,6-4.3,6.7C131.4,214.5,124.6,215.2,117.7,215.2
z" />
</g>
<g>
<path d="M154.4,207.3c-2.1,0-4.1-1.2-5.1-3.3c-1.3-2.8,0-6.1,2.8-7.4c23.5-10.7,40.9-32.2,46.5-57.4
c0.7-3,3.6-4.9,6.7-4.2c3,0.7,4.9,3.6,4.2,6.7c-6.3,28.6-26,53-52.8,65.2C156,207.1,155.2,207.3,154.4,207.3z" />
</g>
<g>
<path d="M206.1,126.9c-3.1,0-5.6-2.5-5.6-5.6c0-14.2-3.7-28.3-10.6-40.6c-1.5-2.7-0.6-6.1,2.1-7.6
c2.7-1.5,6.1-0.6,7.6,2.1c7.9,14,12.1,29.9,12.1,46.1C211.7,124.4,209.2,126.9,206.1,126.9z" />
</g>
<g>
<path d="M185.2,69.8c-1.6,0-3.2-0.7-4.3-2c-9.7-11.5-22.4-20.1-36.5-24.9c-2.9-1-4.5-4.2-3.5-7.1
c1-2.9,4.2-4.5,7.1-3.5c16.1,5.5,30.4,15.2,41.4,28.3c2,2.4,1.7,5.9-0.7,7.9C187.7,69.4,186.4,69.8,185.2,69.8z" />
</g>
<g>
<path d="M45.9,75.3c-1.1,0-2.3-0.3-3.2-1c-2.5-1.8-3.1-5.3-1.3-7.8c11.4-15.9,27.2-27.7,45.8-34.1
c4.4-1.5,8.9-2.7,13.4-3.5c3-0.6,6,1.4,6.5,4.5c0.6,3-1.4,6-4.5,6.5c-4,0.7-7.9,1.8-11.8,3.1c-16.4,5.6-30.3,16-40.3,30
C49.4,74.5,47.7,75.3,45.9,75.3z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" 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 270 270" xml:space="preserve">
<g>
<g>
<path d="M116.8,50.7c-39.3,0-71.3,32-71.3,71.3c0,39.3,32,71.3,71.3,71.3c39.3,0,71.3-32,71.3-71.3
C188,82.7,156.1,50.7,116.8,50.7z M138.5,122c0,34.5-11.5,60.3-21.8,60.3c-10.3,0-21.8-25.8-21.8-60.3c0-34.5,11.5-60.3,21.8-60.3
C127,61.7,138.5,87.5,138.5,122z M56.5,122c0-26.1,16.7-48.4,40-56.8C88.8,78,84,98.3,84,122c0,23.7,4.8,44,12.5,56.8
C73.2,170.4,56.5,148.1,56.5,122z M137,178.8c7.7-12.8,12.5-33,12.5-56.8c0-23.7-4.8-44-12.5-56.8c23.3,8.3,40,30.6,40,56.8
C177,148.1,160.3,170.4,137,178.8z" />
</g>
</g>
</svg>
</svg>
<!-- /logo-animation-container -->
</mask>
< </svg>
<rect id="rect" mask="url(#mask)" x="0" y="0" width="100%" height="100%" />
</svg>
</body>

Here is animating smoothly. No lag. But running the snippet in Safari (OSX 10.8.5 Safari 6.2.8) the animations is different, broken. One ring stay static while the other is going up. But all in a smooth fashion.
Anyway check here: https://www.theparticlelab.com/safari-svg-animation-bug/

SVG animation transform origin propety is not working different browsers [duplicate]

This question already has answers here:
transform-origin for CSS animation on SVG working in Chrome, not FF
(2 answers)
Closed 7 years ago.
I am facing an issue with the transform origin property in firefox and safari. Here is the link what i have done so far : http://jsfiddle.net/Hassanpervaiz/aLfhfstt/
Hers is HTML SVG and CSS code :
.st0{fill:#55B948;}
.st1{fill:none;stroke:#55B948;stroke-miterlimit:10;}
path#small-nid {
-webkit-animation: spin 4s infinite;
animation: spin 4s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(8);
animation-timing-function: steps(8);
}
path#big-nid {
-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(12);
animation-timing-function: steps(12);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<svg>
<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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve">
<g id="circle-border">
<path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
S137.265,1,88.833,1z"/>
</g>
<path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
<path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
</svg>
</svg>
SVG CSS animation. Is there any solution that would be great thank you :)

Edit:
My first try, using only a translate(x,y) chained to the rotate() obviously only worked for Firefox...
As stated in this answer by daviestar the solution is to wrap each of your pathes into <g>element, and apply the transform on those.
But, strangely enough, the problem he describes isn't the same as in my first answer, maybe because of the transform-origin.
Anyway, here is your working code, with no transform-origin anymore:
.st0 {
fill:#55B948;
}
.st1 {
fill:none;
stroke:#55B948;
stroke-miterlimit:10;
}
.niddle-wrapper {
transform: translate(-15%);
}
path#small-nid {
-webkit-animation: spin 4s infinite;
animation: spin 4s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(8);
animation-timing-function: steps(8);
}
path#big-nid {
-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(12);
animation-timing-function: steps(12);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<svg><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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve">
<g id="circle-border">
<path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
S137.265,1,88.833,1z" />
</g>
<g class="niddle-wrapper">
<path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z" />
</g>
<g class="niddle-wrapper">
<path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z" />
</g>
</svg></svg>
First Answer
You could add a translate(x, y) into your transform declaration.
.st0{fill:#55B948;}
.st1{fill:none;stroke:#55B948;stroke-miterlimit:10;}
path#small-nid {
-webkit-animation: spin 4s infinite;
animation: spin 4s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(8);
animation-timing-function: steps(8);
}
path#big-nid {
-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
-webkit-transform-origin: 89px 88px 0;
-ms-transform-origin: 89px 88px 0;
transform-origin: 89px 88px 0;
-webkit-animation-timing-function: steps(12);
animation-timing-function: steps(12);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: translate(-13px,-13px) rotate(0deg);
}
100% {
-webkit-transform: translate(-13px,-13px) rotate(359deg);
}
}
#keyframes spin {
0% {
-webkit-transform: translate(-13px,-13px) rotate(0deg);
transform: translate(-13px,-13px) rotate(0deg);
}
100% {
-webkit-transform: translate(-13px,-13px) rotate(359deg);
transform: translate(-13px,-13px) rotate(359deg);
}
}
<svg>
<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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve">
<g id="circle-border">
<path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
S137.265,1,88.833,1z"/>
</g>
<path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
<path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
</svg>
</svg>