This animation isn't working in firefox, however it works fine in chrome, any ideas what might be wrong? Thanks!
CSS
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce div {
width: 8px;
height: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #000;
display: inline-block;
-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* line 203, ../../sass/modules/qv-overlay.scss */
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
/* line 206, ../../sass/modules/qv-overlay.scss */
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-threeBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-threeBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
HTML
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div> <div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
Related
Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
I seem to be having an problem on the iphone with keeping the end state of my animation, I have a fade in on the the text in my header that doesn't seem to persist it's end state, even when adding forwards. Any insight into this?
Here's the css:
#headerwrap h1 {
color: white;
font-size: 70px;
font-weight: 300;
margin: 0;
opacity: 1;
letter-spacing: 3px;
z-index: 9999;
animation: fadeInDown 3s forwards;
-moz-animation: fadeInDown 3s forwards; /* Firefox */
-webkit-animation: fadeInDown 3s forwards; /* Safari and Chrome */
-o-animation: fadeInDown 3s forwards; /* Opera */
}
And here's the animation keyframes
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
It fixed the problem on desktop, but when I check on my iphone they animations come in, then when they complete the text disappears.
Thanks!
I seemed to have fixed it by removing the transform:none; on the 100% frames.
the following animation doesn't even load in Safari browser (but works nicely in Chrome, Mozilla, IE, Opera)
http://codepen.io/anon/pen/utdIK
Any idea how to fix it? This problem looks similar, but it didn't fit to my problem.
CSS3 animation not working in safari
HTML:
<div id="spinner-2">
<div class="slices bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="maskWheel"></div>
</div>
CSS:
#spinner-2 {
width: 45px;
height: 45px;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
-webkit-animation: spin .8s infinite steps(8);
-moz-animation: spin .8s infinite steps(8);
-ms-animation: spin .8s infinite steps(8);
-o-animation: spin .8s infinite steps(8);
animation: spin .8s infinite steps(8);
}
.slices {
width: 45px;
height: 45px;
position: relative;
transform-origin: right bottom;
}
.slices.bar div {
width: 100%;
height: 100%;
position: absolute;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
background: -webkit-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -moz-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -o-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
#-webkit-keyframes spin {
to {
transform: rotate(1turn);
}
}#-moz-keyframes spin {
to {
transform: rotate(1turn);
}
}#-ms-keyframes spin {
to {
transform: rotate(1turn);
}
}#keyframes spin {
to {
transform: rotate(1turn);
}
}.slices.bar div:nth-child(1) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.slices.bar div:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.slices.bar div:nth-child(3) {
background: linear-gradient(45deg, #ed3000 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
As Dan stated in his answer, the -webkit- prefix was missing.
One issue for Safari 5 is that shortend properties will not be interpreted by the browser.
You need to specify each single animation property in full.
-webkit-animation-name: spin;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(8);
-moz-animation-name: spin;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(8);
-ms-animation-name: spin;
-ms-animation-duration: 8s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: steps(8);
-o-animation-name: spin;
-o-animation-duration: 8s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: steps(8);
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
If still does not work you can try to remove the to and add the percentage and change the 1turn unit and add the default one in degrees.
#-webkit-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-moz-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-ms-keyframes spin {
100% {
transform: rotate(360deg);
}
}#keyframes spin {
100% {
transform: rotate(360deg);
}
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/ with no 'to' and '1turn'
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/3/
Let me know if it works in Safari 5.0.5
The -webkit- prefix was missing from your webkit specific keyframe.
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
Here's an updated Codepen
Tested in Safari 7.
I would just like to add that the element should be display:block type in Safari (display: inline works in chrome only ...)
I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :
img {
border-radius: 50%;
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />
You can use CSS3 transitions with rotate() to spin the image on hover.
Rotating image :
img {
transition: transform .7s ease-in-out;
}
img:hover {
transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>
Here is a fiddle DEMO
More info and references :
a guide about CSS transitions on MDN
a guide about CSS transforms on MDN
browser support table for 2d transforms on caniuse.com
browser support table for transitions on caniuse.com
It's very simple.
You add an image.
You create a css property to this image.
img { transition: all 0.3s ease-in-out 0s; }
You add an animation like that:
img:hover
{
cursor: default;
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
if you want to rotate inline elements, you should set the inline element to inline-block first.
i {
display: inline-block;
}
i:hover {
animation: rotate-btn .5s linear 3;
-webkit-animation: rotate-btn .5s linear 3;
}
#keyframes rotate-btn {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
Here is my code, this flips on hover and flips back off-hover.
CSS:
.flip-container {
background: transparent;
display: inline-block;
}
.flip-this {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-container:hover .flip-this {
transition: 0.9s;
transform: rotateY(180deg);
}
HTML:
<div class="flip-container">
<div class="flip-this">
<img width="100" alt="Godot icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/512px-Godot_icon.svg.png">
</div>
</div>
Fiddle this
here is the automatic spin and rotating zoom effect using css3
#obj1{
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url("obj1.png");
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
#obj2{
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url("obj2.png");
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
#obj6{
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url("obj6.png");
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
/* Standard syntax */
#keyframes mymove {
50% {transform: rotate(30deg);
}
<div style="width:100px; float:right; ">
<div id="obj2"></div><br /><br /><br />
<div id="obj6"></div><br /><br /><br />
<div id="obj1"></div><br /><br /><br />
</div>
This is the animation I'd like to make using CSS.
It is an animated PNG. Firefox is the only browser I know that will show the animation. Please view this in FireFox so you can see the animation. I'd like to try and make it in CSS so I can use it in more browsers and still get true transparency (which animated gifs can't provide)
<-- Here is a single one of the dots, which could be used to make the animation without having to create the dot's shading in css.
This fiddle http://jsfiddle.net/jvrvK/ shows what I've got so far. I sorta have the look of the spheres, but the animation doesn't seem to work in Chrome and I don't understand CSS animations enough to create the same type of rotation in the PNG.
Thanks very much for any help!
Fiddle code below:
<ul class="busy">
<li class="busy-dot1"><b class="busy-dot-shine"></b></li>
<li class="busy-dot2"><b class="busy-dot-shine"></b></li>
<li class="busy-dot3"><b class="busy-dot-shine"></b></li>
<li class="busy-dot4"><b class="busy-dot-shine"></b></li>
<li class="busy-dot5"><b class="busy-dot-shine"></b></li>
</ul>
.busy {
list-style: none;
padding: 0;
position: relative;
transform-style: preserve-3d;
animation: rot 4s linear infinite;
width:100px;
}
.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
border-radius: 50%;
display: inline-block;
transform-style: preserve-3d;
margin: 0 4px;
}
.busy-dot-shine {
display: block;
border-radius: 50%;
background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
background-color: #193987;
animation: rotr 4s linear infinite;
height: 20px;
width: 20px;
}
Chrome can be fussy about prefixes, add PrefixFree library to your code. You could add the prefixes yourself, but I find PreFix Free much easier.
//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
http://jsfiddle.net/adrianjmartin/jvrvK/2/
Another way would be to use SVG:
http://jsfiddle.net/adrianjmartin/AcvE5/3/
This would be an aproximate solution
demo
The HTML is the same that you had; the CSS is
.busy {
list-style: none;
padding: 0;
position: relative;
width:100px;
}
.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
border-radius: 50%;
display: inline-block;
position: absolute;
left: 150px;
top: 50px;
-webkit-animation: rot 4s linear infinite;
animation: rot 4s linear infinite;
}
.busy-dot2 {
-webkit-animation-delay: -3.5s;
animation-delay: -3.5s;
}
.busy-dot3 {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.busy-dot4 {
-webkit-animation-delay: -2.7s;
animation-delay: -2.7s;
}
.busy-dot-shine {
display: block;
border-radius: 50%;
background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
background-color: #193987;
height: 20px;
width: 20px;
}
.busy-dot2 .busy-dot-shine {
height: 15px;
width: 15px;
}
.busy-dot3 .busy-dot-shine {
height: 10px;
width: 10px;
}
.busy-dot4 .busy-dot-shine {
height: 6px;
width: 6px;
}
#-webkit-keyframes rot {
0% {-webkit-transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);
opacity: 0.5;}
25% {-webkit-transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
opacity: 0.8;}
50% {-webkit-transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5);
opacity: 0.5;}
75% {-webkit-transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5);
opacity: 0.2;}
100% {-webkit-transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5);
opacity: 0.5;}
}
#keyframes rot {
0% {transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);
opacity: 0.5;}
25% {transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
opacity: 0.8;}
50% {transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5);
opacity: 0.5;}
75% {transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5);
opacity: 0.2;}
100% {transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5);
opacity: 0.5;}
}
The trick is to set a transform that scales in X 2 times (to generate an elipse when rotated), then rotates and translates to make a circle.
Then apply a scale to make the circles grow, and at last counter-rotate to make the sphere look right
Of course, all the values are aproximate, the GIF is too small to tell if that is accurate
HTML:
<div id="all">
<div id="box">
<div id="circle"></div>
</div>
<div id="box" class="box2">
<div id="circle" class="circle2"></div>
</div>
<div id="box" class="box3">
<div id="circle" class="circle3"></div>
</div>
<div id="box" class="box4">
<div id="circle" class="circle4"></div>
</div>
<div id="box" class="box5">
<div id="circle" class="circle5"></div>
</div>
</div>
CSS:
#box {
position: absolute;
width: 50px;
height: 50px;
}
.box2 {
-webkit-transform: rotate(35deg);
}
.box3 {
-webkit-transform: rotate(70deg);
}
.box4 {
-webkit-transform: rotate(105deg);
}
.box5 {
-webkit-transform: rotate(140deg);
}
.circle2 {
-webkit-transform: scale(.8);
}
.circle3 {
-webkit-transform: scale(.6);
}
.circle4 {
-webkit-transform: scale(.4);
}
.circle5 {
-webkit-transform: scale(.2);
}
#circle {
position: relative;
top: 0px;
left: 50px;
border-radius: 50%;
background: radial-gradient(circle at 25% 25%, #FFF, rgba(255, 255, 255, 0));
background-color: #193987;
animation: rotr 4s linear infinite;
height: 20px;
width: 20px;
}
#all {
position: relative;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
animation: myfirst;
animation-duration: 05s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: myfirst;
-webkit-animation-duration: 05s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
#keyframes myfirst {
0% { transform: rotate(360deg);}
}
#-webkit-keyframes myfirst {
0% { -webkit-transform: rotate(360deg);}
}
Live demo
HTML:
<ul class="busy">
<li class="busy-dot1"><b class="busy-dot-shine"></b></li>
</ul>
CSS:
.busy {
list-style: none;
padding: 0;
position: relative;
transform-style: preserve-3d;
animation: rot 4s linear infinite;
width:700px;
}
.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
border-radius: 50%;
display: inline-block;
transform-style: preserve-3d;
margin: 0 4px;
}
.busy-dot-shine {
display: block;
border-radius: 50%;
background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
background-color: #193987;
animation: rotr 4s linear infinite;
height: 60px;
width: 60px;
}
.busy li
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
animation:rotate 5s linear infinite;
-webkit-animation:rotate 5s linear infinite; /* Safari and Chrome */
}
#keyframes rotate
{
from {transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Safari and Chrome */}
}
#-webkit-keyframes rotate /* Safari and Chrome */
{
from {transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {transform:rotate(-360deg);
-ms-transform:rotate(-360deg); /* IE 9 */
-webkit-transform:rotate(-360deg); /* Safari and Chrome */}
}
See in action: http://jsfiddle.net/Ld9pP/1/
You'll probably choose the other one but whatever