How to create mixins in saas for keyframes using transform - html

Question

I am working in sass files. i have a problem related mixins. i creating a mix-ins for key frames and i have no idea how to create. i have added my code below. please review my code and please create a mix-ins for this. if i copy this code in directly in complied css file then css file automatically remove these key frames.I am working in sass files. i have a problem related mixins. i creating a mix-ins for key frames and i have no idea how to create. i have added my code below. please review my code and please create a mix-ins for this. if i copy this code in directly in complied css file then css file automatically remove these key frames.
.heart-beat {
position: absolute;
top: 50px;
left: 50px;
height: 25px;
width: 25px;
z-index: 10;
border: 5px solid #ef5350;
border-radius: 70px;
-moz-animation: heartbit 1s ease-out;
-moz-animation-iteration-count: infinite;
-o-animation: heartbit 1s ease-out;
-o-animation-iteration-count: infinite;
-webkit-animation: heartbit 1s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-moz-keyframes heartbit {
0% {
-moz-transform: scale(0);
opacity: 0.0; }
25% {
-moz-transform: scale(0.1);
opacity: 0.1; }
50% {
-moz-transform: scale(0.5);
opacity: 0.3; }
75% {
-moz-transform: scale(0.8);
opacity: 0.5; }
100% {
-moz-transform: scale(1);
opacity: 0.0; }
}
#-webkit-keyframes heartbit {
0% {
-webkit-transform: scale(0);
opacity: 0.0; }
25% {
-webkit-transform: scale(0.1);
opacity: 0.1; }
50% {
-webkit-transform: scale(0.5);
opacity: 0.3; }
75% {
-webkit-transform: scale(0.8);
opacity: 0.5; }
100% {
-webkit-transform: scale(1);
opacity: 0.0; }
}

Answer 1

Here is the example of the mixin.This may help you.
Where keyframe() is used to call the keyframe prefix, then prefixed() is used for transform property.
To see the compile code please use SASS Meister online tool
// This is for iterating `Keyframes`
#include keyframes(heartbit){
// This is for iterating `transform`
#include prefixed(transform, scale(0.1);
}
Note: You need to declare this below the mixin.
// Mixin
// prefix declarations
#mixin prefixed($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
// prefix keyframes
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#-o-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}