I'm trying to use a SASS mixin to automatically use vendor-prefixes on animations. This is the mixin:
#mixin keyframes($name) {
#-o-keyframes $name { #content };
#-moz-keyframes $name { #content };
#-webkit-keyframes $name { #content };
#keyframes $name { #content };
}
Now if I include it like this:
#include keyframes(test) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The resulting css looks like this:
#-o-keyframes $name { ... }
#-moz-keyframes $name { ... }
#-webkit-keyframes $name { ... }
#keyframes $name { ... }
SASS is simply not replacing the $name with test. Is this a known bug or are there workarounds? I couldn't find anything related to this problem. I'm using SASS version 3.4.1 by the way.
Change $name to #{$name} in the mixin
#mixin keyframes($name) {
#-o-keyframes #{$name} { #content };
#-moz-keyframes #{$name} { #content };
#-webkit-keyframes #{$name} { #content };
#keyframes #{$name} { #content };
}
Demo
Related
I know this question has been asked many times but my animation is different.
I gave multiple animations to one element using delay. Animation works perfect on all browsers except Safari.
Apparently, Safari wants the animation to be reversed. I tried this but failed. This is some lines of the code to show how I write the animation.
//first revealed text
.has-line-anim-hidden-first {
animation-name: lineScaleOut, lineToBottom, lineToTop, lineScale;
animation-duration: $duration, $duration, $duration, $duration;
animation-delay: 1.6s, 1.9s, 3.6s, 3.9s;
animation-fill-mode: both, both, both, forwards;
animation-timing-function: ease-out, ease-out, ease-out, ease-out;
}
Keyframes:
//Mixin
#mixin keyframes ( $animation-name ) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#-o-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
#include keyframes(reveal) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#include keyframes(unreveal) {
to {
opacity: 0;
}
}
#include keyframes(lineToTop) {
to {
bottom: 80%;
}
}
#include keyframes(lineToBottom) {
from {
bottom: 80%;
}
to {
bottom: 0%;
}
}
#include keyframes(lineScale) {
from {
width: 100%;
}
to {
width: 0;
}
}
#include keyframes(lineScaleOut) {
from {
width: 0;
opacity: 0
}
to {
width: 100%;
opacity: 1;
}
}
You can check all my code by clicking this
What do I need to do to make the code work on the Safari?
Trying to create a mixin for keyframes which will use an include for a vendor based property.
#mixin vendor($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
#{$property}: #{$value};
}
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#include keyframes(scale) {
0% {
#include vendor(transform, scale(1) );
}
100% {
#include vendor(transform, scale(2) );
}
}
But how to prevent writing unnecessary vendors properties to the vendor based keyframes?
#-moz-keyframes scale {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
...
I want to create mixin/function in sass that will customize my #keyframes animation. It looks like I can do it using this code, but is there a better way?
https://www.sassmeister.com/gist/13a4b5d4df15ca46bd484ab5758f6de0
$animation-name: 1 !global;
#mixin animate_bg($color1, $color2) {
$animation-name: unique-id() !global;
#keyframes #{$animation-name} {
0% {
background-color: $color1;
}
100% {
background-color: $color2;
}
}
#content
}
#include animate_bg(#007efe, #cce5ff) {
a.finished {
animation-duration: 0.25s;
animation-name: $animation-name;
}
}
#include animate_bg(#aabbcc, #ffaabb) {
b.finished {
animation-duration: 0.25s;
animation-name: $animation-name;
}
}
Produces this css
#keyframes uz61m5wd4 {
0% {
background-color: #007efe;
}
100% {
background-color: #cce5ff;
}
}
a.finished {
animation-duration: 0.25s;
animation-name: uz61m5wd4;
}
#keyframes uz61m5wdd {
0% {
background-color: #aabbcc;
}
100% {
background-color: #ffaabb;
}
}
b.finished {
animation-duration: 0.25s;
animation-name: uz61m5wdd;
}
Shrunk the SCSS slightly by including your .finished class in the mixin. Not sure if this is exactly what you were looking for, though.
// mixin:
#mixin animate_bg($color1, $color2, $class, $duration) {
$animation-name: unique-id() !global;
#keyframes #{$animation-name} {
0% {
background-color: $color1;
}
100% {
background-color: $color2;
}
}
.#{$class}.finished {
animation-duration: $duration;
animation-name: $animation-name;
}
}
// using the mixin:
#include animate_bg(#007efe, #cce5ff, a, .25s);
#include animate_bg(#aabbcc, #ffaabb, b, .25s);
I've a problem with following code. Using https://www.sassmeister.com/ for testing I already realized, that it's ok with SASS Version 3.3 but not with Version 3.4. How should I change the code so it will work with the current version.
#mixin keyframes ($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#include keyframes(move-up) {
0% {
top: 25px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
The expected output - with V3.3 - should look like
#-webkit-keyframes move-up {
...
}
but with V3.4 I get the following
#-webkit-keyframes $animation-name {
...
}
In SCSS v3.4 you can interpolate in #keyframes with #{}
#mixin keyframes ($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
#include keyframes(move-up) {
0% {
top: 25px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
I already tried
$prefixes: ("-webkit-","-moz-", "-o-", "");
#mixin keyframes($name) {
#each $prefix in $prefixes {
##{$prefix}keyframes #{$name} { #content; }
}
}
and
#mixin keyframes($name) {
#-webkit-keyframes #{$name} { #content; }
#-moz-keyframes #{$name} { #content; }
#keyframes #{$name} { #content; }
}
any way to do this? Couldn't find any solutions with Google :(
I managed to achieve this effect by updating to SASS 3.2 (pre-release via gem install sass --pre), as a result latter now works!