Skip to content

Instantly share code, notes, and snippets.

@AdmireNL
Last active August 29, 2015 14:09
Show Gist options
  • Save AdmireNL/c94b7ecadf2db7580013 to your computer and use it in GitHub Desktop.
Save AdmireNL/c94b7ecadf2db7580013 to your computer and use it in GitHub Desktop.
Animation keyframes mixin with unique ID
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
// Inspired by http://roy.io/tbt
@mixin animation-keyframes($animation-name) {
@keyframes #{$animation-name} {
@at-root {
@content; // at-root only necessary for Sass < 3.2
}
}
}
.some-element {
animation: 10s linear infinite;
$animation-name: unique-id();
animation-name: $animation-name;
@include animation-keyframes($animation-name) {
from {
background-position: 0% 0%;
}
to {
background-position: 114.2857% 0%;
}
}
}
.some-element {
animation: 10s linear infinite;
animation-name: ukzvabf13;
}
@keyframes ukzvabf13 {
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