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;
}
}
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?
I'm trying to create an animation which involves moving several cloud at different speeds to animate a sky. In an attempt to create reusable code I have moved to mixins but I seem to have run in a problem.
The clouds have different starting positions (e.g defined by right: 100px - passed at $startpos).
On the initial pageload the clouds are at the correct position but the animation starts from a random right position.
my scss code is looking like this
#keyframes fadein {
from { opacity: 0 }
to { opacity: 1 }
}
#mixin cloud($height, $width, $bg, $startpos, $slowanim, $fastanim) {
background: url($bg) no-repeat;
background-size: contain;
border: none;
height: $height; // 800
width: $width; // 800
position: absolute;
right: $startpos;
opacity: 1;
animation: movecloudA $fastanim infinite;
&.animate {
animation: fadein 5s, movecloud $slowanim infinite;
opacity: 1;
}
#include keyframes(movecloud) {
0% { right: $startpos; }
100% { right: 100%; animation: movecloud $slowanim infinite;}
}
}
.cloudA {
#include cloud(800px, 800px, 'assets/cloudA.svg', -100px, 5s, 1s)
bottom: -400px;
}
.cloudB {
#include cloud(1200px, 1200px, 'assets/cloudB.svg', -1500px, 9s, 5s)
bottom: -800px;
transform: rotate(360deg);
}
the behaviour can be reproduced on https://meshto.space/, after hovering on the exclamation mark
So I managed to figure this out with some more experimenting.
It seems that keyframe animations are not wrapped up inside a scope and need to have a unique name. The behavior above was actually not random and changed the right offset to -1500 for both clouds once the animation was started.
i.e. all your animations need to have unique names.
The code above was changed to
#keyframes fadein {
from { opacity: 0 }
to { opacity: 1 }
}
#mixin cloud($bg, $anim, $height, $width, $startpos, $slowanim, $fastanim) {
background: url($bg) no-repeat;
background-size: contain;
border: none;
height: $height; // 800
width: $width; // 800
position: absolute;
right: $startpos;
opacity: 1;
// animation: movecloudA $fastanim infinite;
&.animate {
animation: fadein 5s, $anim $slowanim infinite;
opacity: 1;
}
#include keyframes($anim) {
0% { right: $startpos; }
100% { right: 100% }
}
}
.cloudA {
#include cloud('assets/cloudA.svg', cloudAnimA, 800px, 800px, -100px, 5s, 1s)
bottom: -400px;
}
.cloudB {
#include cloud('assets/cloudB.svg', cloudAnimB, 1200px, 1200px, -1500px, 9s, 5s)
bottom: -800px;
transform: rotate(360deg);
}
Would appreciate if there are neater solutions to this problem :). Ty
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;
}
}
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.