Update _mixins.sass

2020-09-03 12:21:59 +02:00 · 2020-09-03 12:21:59 +02:00 · b2817bb569
commit b2817bb569
parent 21932d9be3
1 changed files with 19 additions and 0 deletions
--- a/_mixins.sass
+++ b/_mixins.sass
@ -153,3 +153,22 @@
    margin-left: 0
  &:last-child
    margin-right: 0
+  
+/*
+ * Create animation from a horizontal sprite sheet
+ *
+ * Examples: @include animationSpriteSheet(6, "../img/sprite.png", 1.5s)
+ */ 
+@mixin animationSpriteSheet($steps, $image, $speed: 1s, $iteration: infinite)
+  $id: unique-id()
+  @keyframes #{$id}
+    100%
+      background-position-x: calc(#{$steps} * -100%)
+  animation:
+    name: $id
+    duration: $speed
+    iteration-count: $iteration
+    timing-function: steps(#{$steps}) 
+  background:
+    image: url(#{$image})
+    size: calc(#{$steps} * 100%) auto