I'm applying CSS animations to SVG elements, works well with Firefox and Chrome, but won't render o Edge.. I tried to prefix it but still won't work..
I'm using simple Keyframes animation with this code:
#keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
here is the demo:
http://jsbin.com/regumiruha/edit?html,css,output
Does anyone know how to fix this?
Related
I seem to have an issue with the webkit animations. I added an overlay spinner. This one shows fine on every browser (Mozilla, IE, Edge, Chrome). On Andriod and iPhone/iPad the animation is not fired. Am I missing something in my code?
In CSS I added following to the div of the element:
-webkit-animation-name:webkit-rotate-scale;
-webkit-animation-duration:0.75s;
-webkit-animation-direction:normal;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
and
#-webkit-keyframes webkit-rotate-scale {
0% {-webkit-transform: rotate(0deg) scale(1);}
50% {-webkit-transform: rotate(180deg) scale(.5);}
100% {-webkit-transform: rotate(360deg) scale(1);}
}
Off course I added the standard (no webkit) alternatives also.
Can someone tell me what I'm missing?
The div where I am showing it in has display: inline-block.
Thanks in advance!
Kind regards,
Jerry
Why does the following clipPath animate in Chrome but not Firefox?
http://jsfiddle.net/H8S3k/67/
.graph {
transform: translateY(150px);
animation: 2s ease-out 0s normal none infinite popup;
}
#keyframes popup {
0% {
transform: translateY(50px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(50px);
}
}
In SVG 1.1, only certain attributes were deemed to be stylable with CSS. These particular set of attributes were called "properties". You can see the list of designated properties here:
https://www.w3.org/TR/SVG/propidx.html
transform is not one of those, so it cannot be styled with CSS.
However in SVG 2, which is not yet finalised, all SVG attributes will probably be made stylable. Chrome has begun implementing this, however Firefox has not yet. That is why your example works in Chrome but not Firefox.
I'm using SASS so my CSS syntax looks weird, but anyway, the problem is, that my rotate animation starts well on chrome and firefox, but works only partially on Safari. To be specific, rotateY, scale, skew work normally, but rotate and translateX don't. What is more importat, after I go to another tab and then go back in Safari - suddenly it works as expected.
This is the animation in Safari (before switching tabs):
Safari
Instead of that:
Chrome
Basically, all images appear in the center, and only scale and rotateY animation works, but translate and rotate transitions don't.
To keep it simple this is only the part of the code I use for Safari:
#mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
#at-root (without: media) {
#-webkit-keyframes myOrbit_#{$name} {
from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
}
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}
I've noticed that when I defined the animation with
-webkit-animation-play-state: paused;
then the "satellites" were positioned properly. So the solution was to start the animation with time offset. In my case this helped:
-webkit-animation-delay: 5ms;
One tricky thing was that I had to put it after other -moz- -o- and "regular" animation properties, otherwise is didn't work, like if it was overwritten.
I'm totally stuck with this example of rotating span. http://jsfiddle.net/C94b8/1/ . What I want to do is rotate spin containing val from input but I just can't make it possible. Also tried changing span to display: inline-block. Didn't work either.
You need to set display to inline-block.
Also, Chrome doesn't support a un-prefixed transform yet. Instead, you need to use -webkit-transform. Firefox supports everything, so you don't have to worry there.
Also, you don't have to use 0% and 100%. If that's all you're using, you can use from and to.
One more thing: I think it's IE that doesn't support rotate. They want rotateZ. So I've changed it.
The finished product?
#-webkit-keyframes spin {
from {-webkit-transform: rotateZ(0deg);}
to {-webkit-transform: rotateZ(360deg);}
}
#keyframes spin {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}
header span {
display: inline-block;
/* All the rest of header span {} code goes here. I didn't copy it all. */
}
I am trying to have an element scale up from 0 on page load, but that element needs to be rotated. Seems like a simple thing, but it seems to apply the rotation after the animation finishes:
#-webkit-keyframes scale{
0%{-webkit-transform: scale(0);}
100%{-webkit-transform: scale(1);}
}
div{
-webkit-transform: rotate(30deg);
-webkit-animation: scale 2s;
}
http://jsfiddle.net/mildfuzz/wnpVp/
You need to use the transform shorthand within the #keyframes rule, as your rotate() function is outside the rule and thus not animating like you expected.
http://jsfiddle.net/wnpVp/3