43 lines
1 KiB
SCSS
43 lines
1 KiB
SCSS
@mixin animation($animate...) {
|
|
$max: length($animate);
|
|
$animations: '';
|
|
|
|
@for $i from 1 through $max {
|
|
$animations: #{$animations + nth($animate, $i)};
|
|
|
|
@if $i < $max {
|
|
$animations: #{$animations + ", "};
|
|
}
|
|
}
|
|
-webkit-animation: $animations;
|
|
-moz-animation: $animations;
|
|
-o-animation: $animations;
|
|
animation: $animations;
|
|
}
|
|
|
|
@mixin keyframes($animationName) {
|
|
@-webkit-keyframes #{$animationName} {
|
|
@content;
|
|
}
|
|
@-moz-keyframes #{$animationName} {
|
|
@content;
|
|
}
|
|
@-o-keyframes #{$animationName} {
|
|
@content;
|
|
}
|
|
@keyframes #{$animationName} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Using the mixins looks like this:
|
|
// @include keyframes(move-the-object) {
|
|
// 0% { left: 100px; }
|
|
// 100% { left: 200px; }
|
|
// }
|
|
|
|
// .object-to-animate {
|
|
// @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
|
|
// }
|
|
|
|
// credit: http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
|