Css to convert an icon/image into spinner
add following properties to the class of that icon/image
.spinner{
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-ms-transform: translateZ(0);
transform: translateZ(0);
}
add this to your CSS and you'll have a rotating image
#keyframes load3 {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Related
I am trying to scale the whole page, then rotate it while it is scaled, and then bring it back to its original size. Yet when the rotation starts it brings the page to its original size to rotate it while I want it to rotate while scaled. I hope I'm making sense with the explanation.
'''
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes shrinkingback {
0% {
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#keyframes shrinking {
0% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
}
body {
-webkit-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-moz-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-ms-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-o-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
}
'''
I tried to put each animation in different selectors. I tried to put the transformations in the same keyframe class. I tried applying the scaling on the html element with the rotation on the body tag. Is this possible at all, if not with css maybe with javascript? If it is please guide me there.
Just change rotating animation to
#keyframes rotating {
from {
-ms-transform: rotate(0deg) scale(0.5);
-moz-transform: rotate(0deg) scale(0.5);
-webkit-transform: rotate(0deg) scale(0.5);
-o-transform: rotate(0deg) scale(0.5);
transform: rotate(0deg) scale(0.5);
}
to {
-ms-transform: rotate(360deg) scale(0.5);
-moz-transform: rotate(360deg) scale(0.5);
-webkit-transform: rotate(360deg) scale(0.5);
-o-transform: rotate(360deg) scale(0.5);
transform: rotate(360deg) scale(0.5);
}
}
This keeps body scaled out during rotation.
Im playing around with css3 translateY and i'm not abel to stop the animation at the end.
HTML:
<ul id="nav" class="nav-ctn">
<li>About</li>
<li>Projects</li>
<li>Media</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
CSS:
.tr-up {
-moz-animation: tr-up 0.5s ease-in-out;
-o-animation: tr-up 0.5s ease-in-out;
-webkit-animation: tr-up 0.5s ease-in-out;
animation: tr-up 0.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-moz-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#-webkit-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
So far i have tried the solution form the following posts:
Stopping CSS3 KeyFrames Animation
Stop CSS3 animation jumping
Animation stop with css3
Stopping a CSS3 Animation on last frame
But non of them worked for me.
So what i am doing wrong?
HERES THE FIDDLE
Note: the tr-up class is dynamically added to the link characters.
Animations shouldn't work on inline elements so you need to change the default display property of the <span> tags to span{display:inline-block;} :
If you want to keep the underline on your menu items, you also need to add text-decoration:underline; to those span tags :
DEMO
Try the add iteration count
animation-iteration-count: 1;
It will be possible
I want to rotate image/content in div and return it back (and, of course, doing it infinitely).
But now my animation don't work at all. Can anybody help me?
That what I've done: http://jsfiddle.net/2wkpye6d/1/
#keyframes rotating-linear {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
}
#-webkit-keyframes rotating-linear /* Safari and Chrome */ {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
}
#keyframes reverse-rotating {
from{
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
to{
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
}
#-webkit-keyframes reverse-rotating {
from{
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
to{
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
}
#rotating {
width:48px;
height:48px;
animation-timing-function:ease-in-out; background:url(http://icdn.pro/images/en/g/t/gtk-refresh-icone-4774-48.png);
-webkit-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear steps(1) 2s linear infinite;
/*steps(n) is replacing linear, and linear is replacing steps(n).
that's why it's don't work.*/
-moz-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s steps(1) linear infinite;
-ms-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear steps(1) 2s linear infinite;
-o-animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s steps(1) linear infinite;
animation: reverse-rotating 2s steps(1) linear infinite,rotating-linear 2s steps(1) linear infinite;
}
I found answer. You can see here.
#keyframes rotating {
0%,100% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0%,100% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
}
#rotating {
width:48px;
height:48px;
animation-timing-function:ease-in-out; background:url(http://icdn.pro/images/en/g/t/gtk-refresh-icone-4774-48.png);
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation?
#-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); }
}
Below is the script for flip animation using keyframes
#keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip-animation {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
animation-iteration-count: infinite;
transition-timing-function: linear;
animation-duration: 4.5s;
}
Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/
There you go FIDDLE
Now you can play around with rotations on different axis.
for example,-webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.
.center {
width:300px;
margin:auto;
margin-top:100px;
-webkit-perspective:250px;
perspective:250px;
}
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}
What's wrong with this (in Firefox)? In Chrome, everything works fairly smoothly (except for a small backflip wheni reaches a certain position. What am I doing wrong?
Keyframes:
#keyframes "grow" {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(2) rotate(180deg);
-moz-transform: scale(2) rotate(180deg);
-o-transform: scale(2) rotate(180deg);
-ms-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-moz-keyframes grow {
from {
-moz-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-webkit-keyframes "grow" {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-ms-keyframes "grow" {
from {
-ms-transform: scale(1);
transform: scale(1);
}
to {
-ms-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-o-keyframes "grow" {
from {
-o-transform: scale(1);
transform: scale(1);
}
to {
-o-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#keyframes "spin" {
from {
-webkit-transform: scale(2) rotate(0deg);
-moz-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotate(360deg);
-moz-transform: scale(2) rotate(360deg);
-o-transform: scale(2) rotate(360deg);
-ms-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-moz-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-webkit-keyframes "spin" {
from {
-webkit-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-ms-keyframes "spin" {
from {
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-ms-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-o-keyframes "spin" {
from {
-o-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-o-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
I then applied to specific elements:
.radial_div_item img:hover {
-webkit-animation: spin 1s infinite linear, grow .5s 1 linear;
-moz-animation: spin 1s infinite linear, grow .5s 1 linear;
-ms-animation: spin 1s infinite linear, grow .5s 1 linear;
-o-animation: spin 1s infinite linear, grow .5s 1 linear;
animation: spin 1s infinite linear, grow .5s 1 linear;
}
HTML for icons:
<div class="radial_div" style="position: relative">
<div class="radial_div_item" style="position: absolute; left: 155px; top: -5px;"><img src="img/menu/fb.png" title="Like Us on Facebook!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 315px; top: 85px;"><img src="img/menu/twit.png" title="Follow Us on Twitter!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 315px; top: 280px;"><img src="img/menu/plus.png" title="Add Us on Google+!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 155px; top: 370px;"><img src="img/menu/prj.png" title="Our Project Directory!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: -15px; top: 280px;"><img id="contactOpener" src="img/menu/mail.png" title="Contact Us!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: -27px; top: 75px;"><img src="img/menu/hub.png" title="Check Out Our GitHub!" width="72" /></div>
</div>
Any ideas?
CSS3 animations are supported in only Mozilla 16 or higher.So I would probably recommend you to reconsider your Mozilla version.
Also I don't know it would help but please look into you code
#-moz-keyframes grow should rather be #-moz-keyframes "grow".You missed out the "".Hope it works out for you.