The following CSS works fine in Webkit. Haven't checked it in Opera, but I know it's not working in Firefox. Can anybody tell me why?
The correct classes are definitely getting applied to my HTML (inspected it with Firebug, and I do see the -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot property on .arrow).
This also doesn't work in IE9, although I did originally have -ms-animation:... and -ms-transform:.... I thought it was supposed to work in IE9, but when it didn't I just assumed that IE didn't support these yet. However, now that it's not working in Firefox, maybe something else is going on.
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow {
-webkit-animation: arrowRotateDot 500ms forwards;
-moz-animation: arrowRotateDot 500ms forwards;
-o-animation: arrowRotateDot 500ms forwards;
animation: arrowRotateDot 500ms forwards;
}
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow {
-webkit-animation: arrowRotateF2 500ms forwards;
-moz-animation: arrowRotateF2 500ms forwards;
-o-animation: arrowRotateF2 500ms forwards;
animation: arrowRotateF2 500ms forwards;
}
#-webkit-keyframes arrowRotateDot {
100% {
left:-18px; top:182px;
-moz-transform: scale(1) rotate(-30deg);
-webkit-transform: scale(1) rotate(-30deg);
-o-transform: scale(1) rotate(-30deg);
transform: scale(1) rotate(-30deg);
}
}
#-webkit-keyframes arrowRotateF2 {
0% {
left:-18px; top:182px;
-moz-transform: scale(1) rotate(-30deg);
-webkit-transform: scale(1) rotate(-30deg);
-o-transform: scale(1) rotate(-30deg);
transform: scale(1) rotate(-30deg);
}
100% {
left:115px; top:257px;
-moz-transform: scale(1) rotate(-90deg);
-webkit-transform: scale(1) rotate(-90deg);
-o-transform: scale(1) rotate(-90deg);
transform: scale(1) rotate(-90deg);
}
}
Your animations are not working in Firefox because you are using #-webkit-keyframes, which only applies to Webkit browsers, i.e. Chrome and Safari. The (somewhat) cross-browser way to do animation keyframes is:
#keyframes animationName {
/* animation rules */
}
#-moz-keyframes animationName {
/* -moz-animation rules */
}
#-webkit-keyframes animationName {
/* -webkit-animation rules */
}
Opera and Internet Explorer do not currently support the #keyframes rule.
Skyline is correct. Firefox does not support this, so you will need additional code to get the same or similar effects if they exist without webkit.
Also, here is some additional information that might help you with your code or help you in deciding where to go from this point with your code if adding additional code is not an option (I ended up changing how I code to keep from being overwhelmed with code):
http://caniuse.com/#
http://www.quirksmode.org/webkit.html
Related
I made a fidget spinner animation which we are using for a Sale.
You can see it working perfectly here: https://jsfiddle.net/e2tt2mao/448/
However when I apply the same/similar code to the "scene" i am currently making I cant get it to spin at all...
See here: https://jsfiddle.net/uzfpqysc/8/
I have tried everything.. I'm not sure why it wont spin in my "second js fiddle link"
Any help is much appreciated!
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#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);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
The issue was that the .rotating span had not width and height because the images inside were absolute positioned. I have defined a width and height for the span and have it a transform origin of transform-origin: 50% 50%;. I have also attempted to centrally position the .rotating span, but you may want to adjust it.
https://jsfiddle.net/WizardCoder/uzfpqysc/11/
EDIT: Here is the responsive version. I had to adjust the styles for .animateVSS very slightly to allow me to properly center the spinner. It will do the same as what your styling was doing just a slightly different approach.
https://jsfiddle.net/WizardCoder/uzfpqysc/12/
I have added a keyframe animation to slowly zoom the background image in and it works perfectly, however when I move mouse out the animation jumps back to the original state instead of zooming out.
#startup.hover:before {
opacity:1;
-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
Am I missing something here?
first of all, is .hover a class you are adding or were you meant to use :hover? Just pointing this out. Assuming this is a class, you should add the transitions animation on the id.
#startup:before {
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
..this is why it's breaking when you are hovering out. There's no transition animation without the class!
You dont need such an advanced tool as a keyframes to make this effect.
It is easily achivable with transitions, here is an example.
https://jsfiddle.net/vqL3stjz/
.animable{
width: 100px;
height: 100px;
background-color: #000;
transition: all 500ms;
}
.animable:hover{
transform: scale(1.3, 1.3);
transition: all 500ms;
}
And if you need to make it with keyframes, then i suggest just applying reverse animation to unhovered element.
However, you will need to use some javascript then, to prevent side effect like animation running on the element right after it is loaded etc.
TL;DR Better use tranistions, unless you really need to use keyframes.
I am animating an SVG element, using this code:
#bubble_1_{
-webkit-animation: bubble1 10s forwards linear infinite;
}
#-webkit-keyframes bubble1{
0%{
-webkit-transform: translate(0px,0px);
}
5%{
-webkit-transform: translate(1px,10px);
}
10%{
-webkit-transform: translate(-1px,20px);
}
15%{
-webkit-transform: translate(1px,30px);
}
20%{
-webkit-transform: translate(-1px, 40px);
}
25%{
-webkit-transform: translate(10px,45px);
}
30%{
-webkit-transform: translate(20px,50px);
}
35%{
-webkit-transform: translate(30px,49px);
}
40%{
-webkit-transform: translate(40px, 51px);
}
45%{
-webkit-transform: translate(50px,48px);
}
50%{
-webkit-transform: translate(60px,51px);
}
55%{
-webkit-transform: translate(70px,49px);
}
60%{
-webkit-transform: translate(80px, 51px);
}
65%{
-webkit-transform: translate(90px,48px);
}
70%{
-webkit-transform: translate(100px,51px);
}
75%{
-webkit-transform: translate(110px,49px);
}
80%{
-webkit-transform: translate(120px, 51px);
}
85%{
-webkit-transform: translate(130px,71px);
}
90%{
-webkit-transform: translate(131px,100px);
}
95%{
-webkit-transform: translate(129px,120px);
}
100%{
-webkit-transform: translate(131, 140px);
}
}
But, when it comes to an end, I can see it going back to it's initial position. That is strange, because transition between 100% and 0% should occur instantly, right? I need that kind of behavior, I don't want it to be seen going back.
Does anyone know what I should do? I tried with 'forwards' and 'backwards', it doesn't work.
It looks like you are just missing px on your 131, 140px setting at 100% keyframe, that should then make it instantly jump back to its starting position once finished (which I think is what you want).
If you need it to stop after one play then you need to add -webkit-animation-iteration-count: 1; and remove the infinte off your animation.
The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.
you have to use -webkit-animation-fill-mode: forwards; to do this effect like so :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
this is an example LINK
-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
For example I make scale from 1 to 2, and I want to make it hold when it gets to scale 2, for example while the user hovers some image it is scaled, is that possible?
#-webkit-keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
#keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
animation: scale 2s;
-webkit-animation: scale 2s;
}
use animation-fill-mode: forwards or both
div.item:hover
{
animation: scale 2s forwards;
-webkit-animation: scale 2s forwards;
}
You can use the transition property instead of the keyframes animation.
div.item {
transform: scale(1);
transition: all .2s;
}
div.item:hover {
transform: scale(1.5);
}
See this fiddle for an example: http://jsfiddle.net/8eHHL/
Use this:
.div.item { animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for other modern browsers */
}
Use this.I think it will work.
I give only webkit(Crome) version you need to write for all.
#-webkit-keyframes scale{
0% {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
100% {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
-webkit-animation: scale 2s;
}
I'm afraid it's impossible to keep result of animation in your case. You bind animation on hover and trying to keep it when user blurs mouse from your element. But there is ability to keep animaton on click. click event is done with :target