I have an SVG with animated eyes on my website. The eyes have a blink animation made with transform: scale(). When I now open Chrome and the eyes blink the path of the eyes sometimes gets blurred. It often happens when I scale the website to 90%, but it is not consistent. I also tried adding translateZ(0) and backface-visibility: hidden; but nothing helped.
Can I solve this somehow?
Since it doesn't happen consistently I don't know if this Snippet will show my problem. As an alternative, I made a JSFiddle: https://jsfiddle.net/qnwj8uLm/
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform: scale(1) translateZ(0);
transform-origin: 0% 75%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) translateZ(0); }
96% {transform:scale(1, 1) translateZ(0); }
98% {transform:scale(1, 0.1) translateZ(0); }
100% {transform:scale(1, 1) translateZ(0); }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
The problem likely stems from browser optimization. There are some possible solutions, like will-change: transform, but in my browser it does not work in your example. A hackish way to force the browser to redraw is to add a transform: translateZ(0) right after scaling that is messing the figure:
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform: scale(1) translateZ(0);
transform-origin: 0% 75%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) translateZ(0); }
96% {transform:scale(1, 1) translateZ(0); }
98% {transform:scale(1, 0.1) translateZ(0); }
98.001% {transform: translateZ(0); }
100% {transform:scale(1, 1) translateZ(0); }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
I found a solution to my problem. I changed the blink-keyframe from transform:scale(1, 0.1) to transform:scale(1, 0.2) and now the animation works fine.
Snippet:
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform-origin: 0% 75%;
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) }
96% {transform:scale(1, 1) }
98% {transform:scale(1, 0.2) }
100% {transform:scale(1, 1) }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
Related
I'm trying to create a wave animation with 3 layers. The animation as you can see in the snippet, doesn't seem smooth, and it seems like the waves aren't endless. Besides I can't really get to see the waves structure like in the picture.
I would to see the waves without interruption, when it comes to the end of the animation, it is clearly noticeable that the animation has ended.
[![
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 4.5s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4.5s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(4);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(4);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
The wave animations should move smoothly, so instead of using the linear attribute, we use ease-in-out.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 5s ease-in-out infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4s ease-in-out infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 6s ease-in-out infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
Here is my solution, I hope it helps you.
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 6s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 6s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
#keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(2.5);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-500px) scaleX(2.5);
}
}
#keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-600px) scaleX(3);
}
}
#keyframes move3 {
0% {
transform: translateX(-800px) scaleX(3);
}
25% {
transform: translateX(-100) scaleX(2.5);
}
50% {
transform: translateX(0) scaleX(3);
}
75% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(-800px) scaleX(3);
}
}
<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>
I'm trying to get a simple CSS3 animation on a SVG. Till now it works fine in Firefox and Chrome but not on Safari.
I added #-webkit-keyframes so it should work, but it doesn't.
I just started to code, so I may have gone wrong everywhere but I really need help!
#EYEBROW2 {
-webkit-animation: MoveEyebrow2 3s linear 2.2s 1 both;
-webkit-transform-origin: 57% 10%;
animation: MoveEyebrow2 3s linear 2.2s 1 both;
transform-origin: 57% 10%;
}
#-webkit-keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
#keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
<div>
<svg width="500" height="100">
<g id="EYEBROW2"> <g> <path class="st9" d="M415.4,26.1l-8.6-0.5C406.3,21.8,415.6,26.2,415.4,26.1z" stroke="black" fill="black"/> </g> </g>
</svg>
</div>
But if I try to run the animations everything goes wrong! It's like it doesn't recognize the transform-origin point.
Can anyone help me?
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>
I have an SVG with #keyframe animationS defined inside a <style> block within the file, which I embed in a page using the background-image property.
The animation works perfectly in Chrome and Safari, but not in Firefox. When the image itself is viewed in Firefox, the animation works as expected.
.loader {
height: 3.375rem;
width: 3.375rem;
background: url("http://www.haaretz.co.il/htz/images/htz-spinner.svg");
}
<div class="loader"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<style>
.alef {
fill: #fff
}
.alef-bg {
fill: #09A5D9
}
.commet-wrapper {
-ms-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
-webkit-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
}
.commet {
fill: #067194;
-webkit-animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
}
#-webkit-keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
#-webkit-keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
#keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
<g id="lower">
<circle class="alef-bg" cx="80" cy="80" r="50" />
<path class="alef" d="M100.281,68.29l2.867-1.655c0.439,1.038,0.813,1.661,0.813,1.661S102.515,68.293,100.281,68.29z M72.541,93.58c0,0-4.308-0.04-8.036,0c-1.929,0.022-3.277-0.844-4.204-2.207l-4.653,2.686c-0.612,5.78-1.794,10.405-2.4,12.212 c-0.464,0.86,0.084,0.932,0.084,0.932h21.388C70.909,99.456,72.541,93.58,72.541,93.58z M104.421,87.988 c-5.284-3.548-9.372-6.944-16.08-11.5c-0.273-0.185-0.525-0.496-0.742-0.875l-12.45,7.188l31.58,23.203 c-0.072-0.144,0.264-0.152,0.2-0.292c-1.436-2.984-2.436-6-2.944-9.076C103.341,92.728,103.593,91.712,104.421,87.988z"
/>
</g>
<g class="commet-wrapper">
<path class="commet" d="M0,70c35.899,0,48-31.34,48-70c0-19,27-19,27,0C75,38.66,41.421,70,0,70z">
</path>
</g>
<g id="upper">
<path class="alef-bg" d="M123.3,55C109.493,31.086,78.914,22.893,55,36.7S22.893,81.086,36.7,105L123.3,55z" />
<path class="alef" d="M55.785,65.404c-0.544,5.612-1.276,6.4-1.268,11.048c0.004,5.068,1.708,9.352,1.404,14.356 c-0.066,1.117-0.161,2.201-0.272,3.251l2.933-0.382l1.72-2.305c-1.925-2.832-2.004-7.837-1.52-11.661 c0.548-4.304,3.132-6.432,3.328-6.492l13.04,9.581l7.962-2.317l4.488-4.871c-0.509-0.887-0.812-2.186-0.622-3.397 c0.352-2.192,2.24-3.932,4.084-3.932c3.468,0,6.805,0.003,9.22,0.006l2.518-0.469l0.35-1.186c-1.148-2.713-2.76-8.355,0.561-13.831 c-16.072,0-18.04-0.008-18.04-0.008c0,1.228-0.672,2.784-0.528,5.372c0.148,2.664,1.812,4.844,0.756,8.856 c-0.828,3.144-1.864,4.552-2.776,5.152c-8.428-6.264-20.696-15.256-25.836-19.34l-3.508-0.004c0,0-0.312-0.048-0.208,0.164 C55.397,56.592,56.177,61.328,55.785,65.404z"
/>
</g>
</svg>
Any help would be appreciated, thanks in advance.
This is a bug within Firefox
See bugs:
bugzilla.mozilla.org/show_bug.cgi?id=908634
and
bugzilla.mozilla.org/show_bug.cgi?id=1121478
Only embedded SVG works.
I want my initials "CND" to rotate like this:
http://jsfiddle.net/rukC6/1/
HTML:
<head>
</head>
<body>
<div align="center">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRTCKie7zNcXtCeCjnMsE8kyg7D9fC_-Hllk7VaNoXIGHPLxbWP" class="animation-rotate"/>
</div>
</body>
</html>
CSS:
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.animation-rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
but my code is making it rotate around a wide circle instead of staying in the center:
http://codepen.io/CaptnChristiana/pen/hCsHn
HTML:
<svg xmlns="http://www.w3.org/2000/svg" width="399" height="378" viewBox="0 0 399 378"><style type="text/css"><![CDATA[
.st1{fill:none;stroke:#15ADBC;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#15ADBC;stroke:#15ADBC;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:none;stroke:#1D1E1E;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}]]></style>
<path class="st1" d="M99.972 180.794l175.591 58.929-123.703 85.748zM45.64 210.785l59.428-127.262-5.096 97.271-54.332 29.991 106.22 114.686 174.202-31.196M105.385 82.349l128.825.633-134.238 97.812M308.37 154.665l17.692 139.61-50.499-54.552 32.807-85.058-73.179-71.466.12 2.235 40.252 154.289"/>
<circle class="st2" cx="105.385" cy="82.349" r="3.263"/>
<circle class="st2" cx="235.191" cy="83.199" r="3.263"/>
<circle class="st2" cx="308.349" cy="154.892" r="3.263"/>
<path class="st2" d="M329.321 294.1c.097 1.799-1.284 3.336-3.084 3.434-1.8.096-3.336-1.283-3.433-3.082-.098-1.803 1.283-3.338 3.082-3.434 1.801-.098 3.339 1.281 3.435 3.082z"/>
<circle class="st2" cx="151.861" cy="325.471" r="3.263"/>
<circle class="st2" cx="46.478" cy="209.807" r="3.263"/>
<circle class="st2" cx="99.973" cy="180.795" r="3.263"/>
<circle class="st2" cx="275.564" cy="239.723" r="3.264"/>
<g class="initials">
<path class="st3" d="M233.525 239.931c4.9.225 10.302-.09 15.021-1.492 14.457-4.304 24.611-19.246 26.432-33.729 1.84-14.646-6.16-28.656-18.408-36.203-15.918-9.807-31.015-3.852-31.015-3.852l-19.523 97.735-25.52-117.075-19.141 93.81c-15.568 4.092-30.443.303-41.066-12.182-14.854-17.457-6.279-37.685-6.279-37.685 11.439-27.958 38.459-25.105 38.459-25.105"/></g></svg>
CSS:
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.initials {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
Set the transform-origin property to 50% 50%:
Updated Example
.st3 {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
It's worth noting that the initial/default value of the transform-origin property is 50% 50% 0.