This rotate animation does not work in mozila firefox but in google chrome, it is working properly. Actually this problem only occurs in absolute and relative blocks.In general cases this animation work properly in any browser. Please help..
My css codes are given below.
css code :
.gear1{
display:block;
width:64px;
height:64px;
position:absolute;
left:0;
bottom:0;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 3s;
-o-animation-name: rotate;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 3s;
-ms-animation-name: rotate;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 3s;
animation-name:rotate;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-duration:3s;}
Css Animation :
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-o-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-ms-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
This is because you are using the wrong vendor prefixes in your keyframe declaration. You need to use the same vendor (for transform) prefix of your #key-{vendor}-keyframes.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Related
I have a fade in animation with an opacity, its working great except the fact is the element is showing when the page is loading, then does the animation...
Here is my CSS code:
.header-wrap {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
}
And here are the keyframes:
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
Please help, what am I doing wrong?
I have also tried setting the opacity to 0 in my element, but all that does is not show the element after the animation.
.header-wrap {
opacity: 0;
}
the solution i came to
the header-wrap
.header-wrap {
opacity: 0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
the key frames
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
by translating prior to your keyframes methods and setting opactity to 0 in the header-wrap and using fill mode forward it should work, its working for me on chrome
add opacity:0 to your header so it won't show up on load! then add animation-fill-mode:forwards to apply the lasts properties in your animation to your header
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
.header-wrap {
opacity:0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
}
<h1 class="header-wrap">header</h1>
You should set animation-fill-mode of header-wrap to forward so the opacity stays on 1 after the animation
.header-wrap should look like this
.header-wrap {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0;
}
i'm not to sure if its the bootstrap framework or that i'm missing something but this animation is meant to rotate various states of the letter Y.
h2 .rotateY, li .rotateY{
animation-iteration-count: 1;
animation-fill-mode:forwards; /*when the spec is finished*/
animation: animationFrames ease-in-out 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation: animationFrames ease-in-out 2s;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-moz-animation: animationFrames ease-in-out 2s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-o-animation: animationFrames ease-in-out 2s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards; /*IE 10+*/
-ms-animation: animationFrames ease-in-out 2s;
}
#keyframes animationFrames{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(180deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: rotate(180deg) ;
}
100% {
-o-transform: rotate(180deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(180deg) ;
}
100% {
-ms-transform: rotate(180deg) ;
}
}
the end result should be an upside-down Y after going through 180 degrees rotation.
i'm getting the animation working but after its ran, the Y snaps back to the correct orientation.
The reason for this upside-down Y is a design with typography. using this as an image is not practical.
incidentally, the respective html code for this issue, within a few divs, is:
<h2>H<span class="rotateY">Y</span>BRID</h2>
I have this code that spins an image when hovering:
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: .15s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
http://jsfiddle.net/79FHN/1/
I want it to spin to the other direction when un-hovering.
How can I do this?
I can refactor your code to great extent, all you need is
Demo
img {
-webkit-transition: 1s linear;
transition: 1s linear;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
The issue with your code was, that you were using #keyframes which are nothing but animation, so once it triggers, you need to write a separate keyframe for reversing. As your animation was not so complex, I preferred using simple CSS3 properties to get the job done.
If you feel the animation nudges your icon or you deliberately want to nudge on hover, you can use transform-origin property.
Thanks to #Second Rikudo for pointing out the linear issue.
I want to have a css-coded animated rotating svg image. I have no idea how to do that. At the end it has to look exactly like this: http://baveltje.com/logo/logo.html. I am completely new to css. The rotating svg's are gear1.svg and gear2.svg. I want them to rotate 360 degres for infinite time and I want to call them <.div class="gear1"> and gear2.. Is it possible to let it look exactly like the logo does in the link, but rotating?
I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!
Thanks in advance!
Code:
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
Here is your original animation css (I have removed prefixes to keep it simple):
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gear you should add:
animation-iteration-count to infinite to keep it rolling
transform-origin to center of your div 50% 50% to get gear rolling around itself
display to inline-block
Result:
#gear{
animation-name: ckw;
animation-duration: 15.5s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
/* <--- */
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
And of course add correct prefixes.
If you Google, 'do a barrel roll', the whole page does a 360 rotation. Does anyone have any guesses as to how Google is doing this? I disabled javascript, and it still occurred, so maybe a css rotation?
If you look at the css code :
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
As said above, with CSS3 animations and transform.
Wesbo showed a way to apply the effect on any site. You can view a demo and instruction here.
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
It's a CSS Transition: https://developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;
Example for Mozilla above, use -o and -webkit to target other browsers.
It uses custom CSS animations. See the CSS rules applied to the <body> here:
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
sounds like a css3 rotation transformation applied to either the body or html tags
Add a link with something like that:
javascript:(function(){var s=document.createElement('style');s.innerHTML='%40-moz-keyframes roll { 100%25 { -moz-transform: rotate(360deg); } } %40-o-keyframes roll { 100%25 { -o-transform: rotate(360deg); } } %40-webkit-keyframes roll { 100%25 { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }';document.getElementsByTagName('head')[0].appendChild(s);}());
This guy will do the trick on any webpage:
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
}
Remember that this is for firefox.
if you want infinite
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
body{-webkit-animation: spin 9.9s infinite linear;}