This question already has answers here:
Sass Keyframes animation mixin generating invalid CSS
(2 answers)
Closed 7 years ago.
I currently have a simple keyframes mixin that looks like this:
#mixin keys($animationName) {
#-webkit-keyframes $animationName {
#content;
}
#-moz-keyframes $animationName {
#content;
}
#-ms-keyframes $animationName {
#content;
}
#-o-keyframes $animationName {
#content;
}
#keyframes $animationName {
#content;
}
}
Which I am using for simple fade in animations like this
#include keys(fadeIn) {
0% { opacity: 0; }
100% { opacity: 1; }
}
For some reason, the variable is not translating properly in the css. The css file looks like this:
#-webkit-keyframes $animationName {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes $animationName {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes $animationName {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes $animationName {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes $animationName {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I feel like this is something super simple I am missing but I can't seem to figure it out. All my other variables work except this one. What do you think would be causing this? Thank you.
I fixed it by adding #{animationName} to everything.
#mixin keys($animationName) {
#-webkit-keyframes #{$animationName} {
#content;
}
#-moz-keyframes #{$animationName} {
#content;
}
#-ms-keyframes #{$animationName} {
#content;
}
#-o-keyframes #{$animationName} {
#content;
}
#keyframes #{$animationName} {
#content;
}
}
Related
#mixin fade($num:1, $fade:1, $visible:2) {
#keyframes fade {
0% { opacity: 0; }
#{ $a }% { opacity: 1; }
#{$a * ($fade + $visible)}% { opacity: 1; }
#{$a * ($fade + $visible + $fade)}% { opacity: 0; }
100% { opacity: 0; }
}
}
Im getting the error } expectedscss(css-rcurlyexpected)
It works if i just type the percentages so I think its something to do with how im substituting the variables in
You are converting your number to a percentage improperly.
#mixin fade($num:1, $fade:1, $visible:2) {
#keyframes fade {
0% { opacity: 0; }
#{($num)}% { opacity: 1; }
#{($num * ($fade + $visible))}% { opacity: 1; }
#{($num * ($fade + $visible + $fade))}% { opacity: 0; }
100% { opacity: 0; }
}
}
This code works in current chrome and internet explorer, but not in current firefox (UPDATED Code with unnecessary -moz prefix):
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
The element does not appear at all.
Alas, none of the other identically entitled questions help in this case...
ADDITION / HINT
Maybe my problem lies not within the code above, but in the question
how is the CSS animation fired?
The element in question is simply turned on with ...style.display='inline'. For Chrome and IE, that seems to be ok. But is it not ok for firefox?
You forgot to add rule for firefox. checkout following code
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
That's because you are missing the definition for Mozilla Broswer keyframes.
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
and the moz-animation
.sh-tada {
-moz-animation:sh-tada 2s linear 1;
}
Add these to your css and it should work.
I have this Less mixin:
.keyframes (#name, #fromRules, #toRules) {
#-webkit-keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
#keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
}
I call for example:
.keyframes(fade-in,
{
opacity: 0;
},
{
opacity: 1;
}
);
The result is:
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
But how can I use Less mixins so I can use keyframes-selector different from 0%, 100% and also more than 2 keyframes-selector so result will look like this:
#keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
Thanks for help.
You could achieve this by passing the rules for the entire list of keyframe selectors (like 0%, 50%, 100% etc) as a single rule-set to the mixin along with the name of the animation.
Also as mentioned by seven-phases-max in the comments, #-webkit-keyframes ~'#{name}' is not required and it can simply be written as #-webkit-keyframes #name.
.keyframes (#name, #rules) {
#-webkit-keyframes #name { #rules(); }
#keyframes #name { #rules(); }
}
div{
.keyframes(fade-in,
{
0% { opacity: 0;}
50% { opacity: 1;}
100% { opacity: 0;}
});
}
CodePen Demo - Click on the eye icon in the CSS box to see the compiled output.
Note:
Passing rulesets to a mixin was introduced in Less v1.7.0 and hence the above code will not work with lower versions.
I am confused. Which one is the correct way to write #keyframe rules ?
#-webkit-keyframes Name {
0%,100% {
-webkit-transform:scale(0,0);
}
}
OR
#-webkit-keyframes Name {
0%,100% {
transform:scale(0,0);
}
}
Or
#-webkit-keyframes Name {
0%,100% {
-webkit-transform:scale(0,0);transform:scale(0,0);
}
}
Yes, prefixes are important as browser support depend on that caniuse.com
resources this article help you to write keyframe and make sure you are writing normal selector at the end that uses your default declaration first and if browser don't support then it pick prefixes :
way to write keyframes:
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% {-webkit-transform:scale(0,0);
transform:scale(0,0); }
100% { -webkit-transform:scale(1,1);
transform:scale(1,1);}
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { -moz-transform:scale(0,0);
transform:scale(0,0); }
100% { -moz-transform:scale(1,1);
transform:scale(1,1); }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { -o-transform:scale(0,0);
transform:scale(0,0);
}
100% { -o-transform:scale(1,1);
transform:scale(1,1);}
}
OR
#keyframes NAME-YOUR-ANIMATION {
0% { -o-transform:scale(0,0);
-moz-transform:scale(0,0);
-webkit-transform:scale(0,0);
-ms-transform:scale(0,0);
transform:scale(0,0); }
100% { -moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1); }
}
Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.
STANDARD CSS
#-webkit-keyframes crank-up {
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes crank-up {
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes crank-up {
100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
100% { transform: rotate(360deg);}
}
I'm using the same mixin as in the following post SASS keyframes not compiling as wanted which is shown below.
MIXIN
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
The above is OK, as long as none of the keyframes include a property that requires a vendor prefix. Like the transform property as all the vendor prefixed keyframes get applied with (in this case) the -webkit- prefix.
For example:
SCSS
#include keyframes(crank-up) {
100% { -webkit-transform: rotate(360deg);}
}
CSS
#-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
Notice the above, -webkit- with a -moz-keyframe. Should be -moz-
So, my first thought was to alter the above mixin to:
ALTERED MIXIN
#mixin keyframes($first-name, $last-name, $argument) {
#-webkit-keyframes #{$first-name} {
-webkit-#{$last-name}: #{$argument};
}
#-moz-keyframes #{$first-name} {
-moz-#{$last-name}: #{$argument};
}
#-o-keyframes #{$first-name} {
-o-#{$last-name}: #{$argument};
}
#keyframes #{$first-name} {
#{$last-name}: #{$argument};
}
}
With a call to the mixin looking like
SCSS
#include keyframes(crank-up, transform, rotate(360deg)) { }
CSS
#-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
#-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
#-o-keyframes crank-up { -o-transform: rotate(360deg); }
#keyframes crank-up { transform: rotate(360deg); }
This works all ok if there is only ONE Keyframe 'stage' (see in original code - top of page, there's only the 100% mark), excuse if my terminology is slightly off in reference to keyframe 'stage'.
PROBLEM
I want a mixin like the above to work with something like.
#-webkit-keyframes crank-up {
20%,
40% { -webikit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
I have also looked into the two Compass Animate plugins; compass-animation and the newer compass-animate but not really sure if these can help. I need some way of adding in a variable and testing for this with a mixin but don't know if it's possible to pass variable into mixins.
Any help much appreciated. Thanks
I've been playing around with the following but neither work, just thought I'd add them up to see if anyone knows where I'm going wrong.
EXPERIMENTAL MIXINS:
#mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
#{$webkit}: #{$name}: #{$argument};
#{$moz}: #{$name}: #{$argument};
#{$o}: #{$name}: #{$argument};
#{$stale}: #{$name}: #{$argument};
}
#mixin vendor-prefix($last-name, $argument){
#if $name == webkit {
-webkit-#{$name}: #{$argument};
} #else if $name == moz {
-moz-#{$name}: #{$argument};
} #else if $name == o {
-o-#{$name}: #{$argument};
} #else {
#{$name}: #{$argument};
}
}
To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.
So, in your case, you just need to write this:
#keyframes crank-up {
20%,
40% { -webkit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
And autoprefixer converts it automatically to:
#-webkit-keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
Autoprefixer is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...
Here is more info about the project
If you are already using Compass and don't want to load whole bounce of extra library and just want to write some mixing then THIS is the best option.
/* animation mixing
keyframe animation
#include animation('animation-name .4s 1')*/
#mixin animation($animate...) {
$max: length($animate);
$animations: '';
#for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
#if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
And here is the keyframe Mixing to include CSS3 properties inside particular browser vender prefix, instead of #include translate, we use the full css (Note: if you're using Sass 3.3 or older, you'll need to remove the !global flag):
#mixin keyframes($animationName) {
#-webkit-keyframes #{$animationName} {
$browser: '-webkit-' !global;
#content;
}
#-moz-keyframes #{$animationName} {
$browser: '-moz-' !global;
#content;
}
#-o-keyframes #{$animationName} {
$browser: '-o-' !global;
#content;
}
#keyframes #{$animationName} {
$browser: '' !global;
#content;
}
} $browser: null;
For your reference here is the SASS example:
#include keyframes(animation-name) {
0% {
#{$browser}transform: translate3d(100%, 0, 0);
}
100% {
#{$browser}transform: translate3d(0%, 0, 0);
}
}
And here how you include your animation to the particular class or ids
.new-class {
#include animation('animation-name 5s linear');
}
That's all.