/*  ============================================================================
*
*   Reel
*
*   Styling for individual Reel elements
*   ========================================================================= */

@keyframes reelSpin {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -450px;
  }
}

.Reel {
  background-color: grey;
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 0;
  width: 75px;
  height: 75px;
  margin: 0;
  display: inline-block;

  & + & {
    margin-left: 8px;
  }

  &_method {
    background-image: url('../images/reel-1.jpg');
    animation: reelSpin 300ms linear 0s infinite normal;
  }

  &_equipment {
    background-image: url('../images/reel-2.jpg');
  }

  &_flavoring {
    background-image: url('../images/reel-3.jpg');
  }
}

/*  ============================================================================
*
*   Reel
*
*   Styling for individual Reel elements
*   ========================================================================= */

@keyframes reelSpin {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -450px;
  }
}

.Reel {
  background-color: grey;
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 0;
  width: 75px;
  height: 75px;
  margin: 0;
  display: inline-block;

  & + & {
    margin-left: 8px;
  }

  &_method {
    background-image: url('../images/reel-1.jpg');
    //animation: reelSpin 400ms linear 0s infinite normal;
  }

  &_equipment {
    background-image: url('../images/reel-2.jpg');
    //animation: reelSpin 400ms linear 0s infinite reverse;
  }

  &_flavoring {
    background-image: url('../images/reel-3.jpg');
    //animation: reelSpin 400ms linear 0s infinite normal;
  }

  &-spin {
    animation: {
      name: reelSpin;
      duration: 400ms;
      iteration-count: 20;
      timing-function: linear;
      delay: 0s;
      direction: normal;
    }
  }

  &-reverseSpin {
    animation: {
      name: reelSpin;
      duration: 400ms;
      iteration-count: 20;
      timing-function: linear;
      delay: 0s;
      direction: reverse;
    }
  }
}

Add Reel-spin and Reel-reverseSpin elements
Add Reel-spin and Reel-reverseSpin elements
