I Have some problems with one of my animations in CSS, but two are working great. They all work great localy, but two dosent work when I put it up on my wordpress page.Someone who knows what the problem is?
My CSS (only with the animation that doesen't work):
.start{
-webkit-animation-name: start;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-webkit-animation-direction: reverse;
-moz-animation-name: start;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-moz-animation-play-state: running;
-moz-animation-direction: reverse;
-ms-animation-name: start;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-in-out;
-ms-animation-play-state: running;
-ms-animation-direction: reverse;
animation-name: start;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: running;
animation-direction: reverse;
}
#-ms-keyframes start {
from { -ms-transform: translateX(0px); }
50% { -ms-transform: translateX(-100px); }
to { -ms-transform: translateX(0px); }
}
#-moz-keyframes start {
from { -moz-transform: translateX(0px); }
50% { -moz-transform: translateX(-100px); }
to { -moz-transform: translateX(0px); }
}
#-webkit-keyframes start {
from { -webkit-transform: translateX(0px); }
50% { -webkit-transform: translateX(-100px); }
to { -webkit-transform: translateX(0px); }
}
#keyframes start {
from {
transform: translateX(0px);
}
50% {
transform: translateX(-100px);
}
to {
transform: translateX(0px);
}
}
/*************************
Animationer - stop
**************************/
.stop{
-webkit-animation-name: start;
-webkit-animation-play-state: paused;
-moz-animation-name: start;
-moz-animation-play-state: paused;
-ms-animation-name: start;
-ms-animation-play-state: paused;
animation-name: start;
animation-play-state: paused;
}
Im sorry, a bit of sleep did me well. Found that it was just a little bit wrong in my javascript-code. Dont know why it worked anyway on my cumputer (outside of wordpress), but at least I found the problem now!
Related
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 create a spinning image using CSS3, but I don't know why it doesn't work on Chrome.
I tested with Firefox and IE, both working but not Chrome.
I just started learn about #keyframe in CSS3.
What is the mistake in my code?
#-webkit-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#-o-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.playing {
-webkit-animation-name: spin;
-webkit-animation-duration: 1500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: spin;
-o-animation-duration: 1500ms;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: spin;
animation-duration: 1500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.playing:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
You should use:
`-webkit-transform`
(instead of transform)
See, also, this short demo.
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.
I've come across this post//
Slide out text from an image using CSS on hover
The CSS works perfectly, except I would like for the animation to stop after it's rotated once.
Is this possible? If so how can I accomplish this?
HTML:
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(180deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.srch_btn:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
Change animation-iteration-count: infinite to 2.
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;}