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;
}
}
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 am trying these SCSS mixins from this gist for CSS animation browser prefixes, but it's outputting the literal $animation_name where it should be outputting the actual value for $animation_name in the CSS. How do I get the actual value into the CSS output?
SCSS:
#mixin animation ($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: forwards;
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: forwards;
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: forwards;
}
#mixin mykeyframe ($animation_name) {
#-webkit-keyframes $animation_name {
#content;
}
#-moz-keyframes $animation_name {
#content;
}
#-o-keyframes $animation_name {
#content;
}
#keyframes $animation_name {
#content;
}
}
.top{
position:relative;
top: 0%;
width: 100%;
text-align: center;
#include animation(0s,1s,inFromTop);
}
#include mykeyframe(inFromTop) {
from{
margin-top: -100%;
}
to{
margin-top: 0;
}
}
CSS output (note the literal $animation_name in the code)
.top {
position: relative;
top: 0%;
width: 100%;
text-align: center;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 1s;
-webkit-animation-name: inFromTop;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0s;
-moz-animation-duration: 1s;
-moz-animation-name: inFromTop;
-moz-animation-fill-mode: forwards;
-o-animation-delay: 0s;
-o-animation-duration: 1s;
-o-animation-name: inFromTop;
-o-animation-fill-mode: forwards;
animation-delay: 0s;
animation-duration: 1s;
animation-name: inFromTop;
animation-fill-mode: forwards;
}
#-webkit-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-moz-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-o-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
Here's the HTML and SCSS in Codepen
Inspect the CSS in Codepen debug mode to see the CSS it is outputting
Sass interpolation seems to solve the issue: SassMeister Demo
SCSS:
#mixin mykeyframe ($animation_name) {
#-webkit-keyframes #{$animation_name} {
#content;
}
#-moz-keyframes #{$animation_name} {
#content;
}
#-o-keyframes #{$animation_name} {
#content;
}
#keyframes #{$animation_name} {
#content;
}
}
CSS Output:
#-webkit-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-moz-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#-o-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
#keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
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);
Sass newbie here. Playing with mixins. Something is not right:
$> sass -v
Sass 3.4.23 (Selective Steve)
$> cat myscss.scss
// Keyframe animations
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
}
#include keyframes(move-up) {
0% {
top: 25px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
$> sass myscss.scss
#-webkit-keyframes $animation-name {
0% {
top: 25px;
opacity: 1; }
100% {
top: -50px;
opacity: 0; } }
And this is the problem. I was expecting:
#-webkit-keyframes move-up {
0% {
top: 25px;
opacity: 1; }
100% {
top: -50px;
opacity: 0; } }
What am I missing?
Please bear with my adding or meaningless text here. Apparently stackoverflow won't let me post my question because they see too much code and too little text. Hopefully this is enough.
Googling around, I see that this does the trick, but why it does, it is not clear to me:
#mixin keyframes ($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
}