I didn't asked about transform origin. I asked why the animation doesn't work on mozilla
I'm stuck doing some animation svg on Mozilla. What I have tried in Chrome the animation worked perfectly fine, but when I tested on mozilla it's doesn't work well. I have put the vendor prefix, still the animation doesn't work properly.
I can't share the svg because the line of code to share here is limited, So please check it out from the demo.
Here is the DEMO
CSS
.trans-animate {
-webkit-transform: translate(-24%,9%);
transform: translate(-24%,9%);
-webkit-animation: wavedash 6s ease-out infinite;
animation: wavedash 6s ease-out infinite;
}
#-webkit-keyframes wavedash {
0% {
-webkit-transform: translate(-28%,9%);
transform: translate(-28%,9%);
}
50% {
-webkit-transform: translate(-42%,9%);
transform: translate(-42%,9%);
}
100% {
-webkit-transform: translate(-20%,9%);
transform: translate(-20%,9%);
}
}
.trans-animate2 {
-webkit-transform: translate(-38%,2%);
transform: translate(-38%,2%);
-webkit-animation: wavedash2 10s ease-out infinite;
animation: wavedash2 10s ease-out infinite;
}
#-webkit-keyframes wavedash2 {
0% {
-webkit-transform: translate(-28%,2%);
transform: translate(-28%,2%);
}
50% {
-webkit-transform: translate(-5%,2%);
transform: translate(-5%,2%);
}
100% {
-webkit-transform: translate(8%,2%);
transform: translate(8%,2%);
}
}
.dolphin-loca {
/*transform: translate(-166%,69%);*/
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
50% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
65% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
80% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
}
.text-dolphin {
-webkit-animation: dolphin-button 8s ease-out infinite;
animation: dolphin-button 8s ease-out infinite;
}
#-webkit-keyframes dolphin-button {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
50% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 0;
}
65% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
78% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
85% {
-webkit-transform: translate(-162%, -60%);
transform: translate(-162%, -60%);
opacity: 0;
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
}
.closeEye {
-webkit-animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
}
#-webkit-keyframes eye {
0% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
10% {
-webkit-transform: translateY(265px) scaleY(0.05);
transform: translateY(265px) scaleY(0.05);
}
15% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
25% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
30% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
35% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
40% {
-webkit-transform: translateY(255px) scaleY(0.1);
transform: translateY(255px) scaleY(0.1);
}
100% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
}
There are two reasons your animation doesn't work on Firefox.
The primary reason is that you have #-webkit-keyframes rules, which work in Chrome, but you have no #keyframes rules, which Firefox needs. You need to include both variants.
The second reason is related to the transform-origin difference between Firefox and Chrome.
Percentages in SVG files are relative to the viewport size (the dimensions of the SVG). That's what Firefox does. So translate(-172%,40%) is putting the dolphin way off the edge of the SVG.
Chrome is calculating percentages relative to the dimensions of the dolphin. That is not the correct behaviour.
If you want your animation to work in both browsers, you need to switch to using absolute pixel values in your transform rules (eg. 100px).
.dolphin-loca {
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
#keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
<svg x="0px" y="0px" width="1600px" height="450.39px" viewBox="0 0 1600 450.39">
<g id="Layer_7" class="dolphin-loca" >
<path id="XMLID_29_" fill="#0083B7" d="M805.419,255.439c0-44.307-28.647-75.028-71.876-79.144 c1.21-4.736,2.37-7.935-2.083-7.935c-3.665,0-8.222,3.306-11.537,7.72c-44.529,2.807-74.611,34.122-74.611,79.359 c0,12.658,2.772,23.054,7.724,31.504c-4.966,9.543-5.992,22.504-1.546,28.282c5.617,7.3,8.705-3.645,17.415-11.529 c15.167,10.519,32.232,14.748,56.46,14.748c2.102,0,4.185-0.033,6.248-0.098c-0.163,6.328-2.354,13.155-7.468,20.396 c-3.842-5.743-20.614-27.065-47.537-8.519c-1.583,1.09,17.322,28.912,44.758,12.288c-0.328,0.717-0.755,2.152,1.434,1.581 c-4.001,6.03-9.983,19.613,5.826,32.179c1.107,0.88,16.966-18.865-2.171-34.437c5.641-3.797,16.995-12.42,26.062-25.462 c13.228-2.205,20.431-6.272,29.324-12.662c8.699,7.883,11.786,18.811,17.4,11.515c4.446-5.778,3.42-18.739-1.546-28.282 C802.648,278.493,805.419,268.097,805.419,255.439z M725.366,314.436c-44.229,0-74.917-14.978-74.917-59.207 s30.688-74.401,74.917-74.401c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z" />
</g>
</svg>
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
Hi guys so im hitting a brick wall with 2 issues:
IE the pulse in the middle works but not the circular progress
In safari (win) the curcluar progress does not work
Firefox and Chrome work fine
Any ideas? i literally only have a few hours ot crack this.
NOTE: You have to click on the circle in order to start the animation. Thanks in advance for any help in cracking this for me.
JSFiddle: http://jsfiddle.net/0pkqk5r0/1/
HTML:
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
CSS:
/* temp */
body {
background: #072237;
}
h3, p {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
cursor: pointer;
}
#ring.active {
-webkit-animation: load 6s 1 forwards;
-moz-animation: load 6s 1 forwards;
-o-animation: load 6s 1 forwards;
-ms-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FFFFFF;
border-radius: 50%;
}
#circle.active {
background: #FF1251;
-webkit-animation: pulse 1.2s 3;
-moz-animation: pulse 1.2s 3;
-o-animation: pulse 1.2s 3;
-ms-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* Pulse */
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-moz-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-o-keyframes pulse {
0% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-o-transform: scale(1);
transform: scale(1);
}
40% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-ms-transform: scale(1);
transform: scale(1);
}
40% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
/* Loading */
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
The shorthand animations will work on:
IE10+
Safari 9+
Use HTML+TIME for older versions of IE:
.time {behavior: url(#default#time2)}
<div id="circle" class="time" begin="0" end="2" timeAction="style">
Use longhand for older versions of Safari:
#circle.active {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
}
References
Introduction to CSS3 Animations
What's New in Safari
Safari CSS Visual Effects Guide
Internet Explorer 10 Guide for Developers
Internet Explorer 10 on Windows 7
HTML+TIME Specification
time2 Behavior
Using the HTML+TIME Document Object Model (DOM)
Animated DHTML
BUG: HTML+TIME Code Fails Inside an Element Behavior
As you will see from the code below I have a lovely circular progress bar however I have a few questions and a little lost on how to achieve this (ideally I don't want to use any JS)
I want to make the pink bar that goes around be curved and not
flat, is this possible? like the edge of it. So instead of it being
| it would be a little like ) at the start and end.
The throbbing circle in the middle, is it possible for it to pause
for like 1 second once animation is complete before it starts
again?
/* Load Progress Animation */
#-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
#keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
I've re-written the entire code.
For your first question, you could simply use stroke-linecap="round".
For the second one, you will have to add an extra #keyframes rule for the delay.
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
No. 1. is possible using stroke-linecap, but it requires some changes to your code, becasue in your case the red line is actually a background and the gray the stroke - so it would result in a concave circle, so "(", not ")" at the end of the red line. 2. can be done using longer animation set to alternate so it "sleeps" between 50% and 100% and back. I've made some changes:
http://jsfiddle.net/3yq3kmo1/
Changes in SVG (the second element):
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS (note that the dashoffset has been reversed, so now a red stroke grows and hides the gray, instead of red shrinking and revealing the gray; the stroke on path in first SVG element is gray now.)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
The pause in animation:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
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.