Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active August 29, 2015 14:09
Show Gist options
  • Save jensgro/438f926a1fabab93200d to your computer and use it in GitHub Desktop.
Save jensgro/438f926a1fabab93200d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// Keyframes Mixin
// https://medium.com/@dtinth/declaring-a-css-animation-keyframes-directly-on-an-element-using-sass-f091a0a15dbd
@mixin animation-keyframes {
$animation-number: 0 !default !global;
$animation-number: $animation-number + 1 !global;
$name: unquote("animation#{$animation-number}");
animation-name: $name;
@at-root {
@keyframes #{$name} {
@content;
}
}
}
.my-module {
animation: 10s linear;
animation-iteration-count: infinite;
@include animation-keyframes {
from {
background-position: 0% 0%;
}
to {
background-position: 114.2857% 0%;
}
}
}
.my-module {
animation: 10s linear;
animation-iteration-count: infinite;
animation-name: animation1;
}
@keyframes animation1 {
from {
background-position: 0% 0%;
}
to {
background-position: 114.2857% 0%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment