From b2817bb569c57f6fb5621c5d8da4f4c6a2aa2f24 Mon Sep 17 00:00:00 2001
From: Andros Fenollosa <tanrax@users.noreply.github.com>
Date: Thu, 3 Sep 2020 12:21:59 +0200
Subject: [PATCH] Update _mixins.sass

---
 _mixins.sass | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/_mixins.sass b/_mixins.sass
index a06a668..aa404f1 100644
--- 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