If i'm using #keyframes to perform a transform animation, how would I lay out my prefixes?
If i have the following:
#keyframes animation {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
Do i then need to add all my transform prefixes to each keyframe declaration? EG:
#keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
Does this work? If this the best way to do this or is there a shorthand / quicker way? I'd imagine this way will look bulky and horrible very quickly with even mildly complex animations.
In general, prefixes are a mess especially when it comes to CSS animations and transforms. I have a comprehensive guide to managing prefixes for these two features which you can find here.
What you have certainly works, but it's unnecessary:
Browsers other than IE aren't going to recognize the -ms-transform declaration anyway, and the versions of IE that support CSS animations out of the box also support unprefixed transform.
This means the -ms-transform simply isn't needed, at all. You should remove all instances of it. You only really need it outside of CSS animations where you want the transforms to work statically in IE9. See the link above for details.
Animations and transforms were unprefixed in WebKit only very recently. However, versions of WebKit that support #keyframes unprefixed also support transforms unprefixed. You can remove the -webkit-transform declarations from your #keyframes rule.
I wouldn't touch the unprefixed transform declarations in both rules. Transforms were unprefixed slightly earlier than animations, so some WebKit versions that require #-webkit-keyframes do support unprefixed transforms.
Also, the unprefixed rule should come last. This applies both to properties (like transform) and to at-rules (like #keyframes). Here's your CSS with the above optimizations:
#-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#keyframes animation {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
Related
On loading state I have a #keyframes animation running.
#keyframes graph-line-loading {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
When I stop the animation graph__line jumps to translateY() value (set inline).
However the background-color does nicely animate.
I would expect transition property working on transform as well.
.graph__line {
transition-property: transform, background-color;
}
If the background-color is included in #keyframes animation it doesn't get transitioned on state change either.
Seems like whatever property is animated in #keyframes gets ignored by transition property even though #keyframes is added via different class.
Plz check the fiddle.
https://jsfiddle.net/LukaG/m4bzk6e3/
Any ideas?
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 trying to apply an animation to a group within an SVG element. However, I'm finding that it isn't applied or is being overridden, as it's crossed out in Chrome Developer Tools. That said, I have no idea what could be causing it.
Animation code:
.ghost {
animation: float 3s ease infinite;
}
#keyframes float {
50% {
transform: translate(100px, 100px);
}
}
I'd post the HTML (the problem might be there) but it's incredibly verbose because of all the SVG paths. Link to a Codepen instead: ghost
Thank you so much! I have no idea what could be causing the issue at this point.
You're missing your vendor prefixes. Example:
.ghost {
-webkit-animation: float 3s ease infinite;
}
#-webkit-keyframes float {
50% {
-webkit-transform: translate(100px, 100px);
}
}
For an easy fix, try adding Prefix-free in CodePen's CSS editor. Here it is with Prefix-free enabled:
Codepen
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. */
}
Are CSS prefixed keyframes stackable as long as they don't include any prefixed specific attributes in them?
Common
#-webkit-keyframes myAnimation{
to{ opacity:0; }
}
#-moz-keyframes myAnimation{
to{ opacity:0; }
}
#keyframes myAnimation{
to{ opacity:0; }
}
Stacked
#-webkit-keyframes myAnimation, #-moz-keyframes myAnimation, #keyframes myAnimation{
to{ opacity:0; }
}
Not natively in CSS but you can accomplish this by using a CSS preprocessor, for example LESS which supports the concept of "mixins" to remove some duplication.
More info can be found here, specifically the example from the article:
#-webkit-keyframes myAnimation {.mixi-frames;}
#-moz-keyframes myAnimation {.mixi-frames;}
.mixi-frames () {
opacity:0;
}
It wouldn't work unfortunately. If you group selectors, all of them have to be valid in order for any of them to be.
For instance, if you used your stacked example...
#-webkit-keyframes myAnimation, #-moz-keyframes myAnimation, #keyframes myAnimation{
to{ opacity:0; }
}
... on Firefox, it would read the webkit prefixed selector as invalid, which would make the rest of it, including the -moz- prefixed selector, also invalid.
Travis' preprocessor workaround in the other answer is probably the best way to write it cleanly as you'd like.
EDIT: This is misinformed, these can never be grouped as they are at-rules, not selectors. Same obviously goes for media queries (#media), #font-face, etc. Check out Boltclock's comment below.