title: Switch between :global and :local css modules for animating elements using sass mixins
body: <p>I wanted to switch between :global and :local while using keyframes and animation and the below given code works:</p>
  
  <pre><code>@mixin keyframe ($animation_name, $isGlobal: false) {
    @if $isGlobal {
      @-webkit-keyframes :global(#{$animation_name}) {
        @content;
      }
  
      @-moz-keyframes :global(#{$animation_name}) {
        @content;
      }
  
      @keyframes :global(#{$animation_name}) {
        @content;
      }
    }
  
    @else {
      @-webkit-keyframes #{$animation_name} {
        @content;
      }
  
      @-moz-keyframes #{$animation_name} {
        @content;
      }
  
      @keyframes #{$animation_name} {
        @content;
      }
    }
  }
  
  @mixin animation (
    $animation_name,
    $duration,
    $isGlobal: false,
    $animation_timing_function: linear,
    $delay: 0,
    $fillmode: forwards,
    $direction: normal,
  ) {
    @if $isGlobal {
      :global {
        -webkit-animation-name: $animation_name;
        -webkit-animation-duration: $duration;
        -webkit-animation-timing-function: $animation_timing_function;
        -webkit-animation-delay: $delay;
        -webkit-animation-fill-mode: $fillmode;
        -webkit-animation-direction: $direction;
  
        -moz-animation-name: $animation_name;
        -moz-animation-duration: $duration;
        -moz-animation-timing-function: $animation_timing_function;
        -moz-animation-delay: $delay;
        -moz-animation-fill-mode: $fillmode;
        -moz-animation-direction: $direction;
  
        animation-name: $animation_name;
        animation-duration: $duration;
        animation-timing-function: $animation_timing_function;
        animation-delay: $delay;
        animation-fill-mode: $fillmode;
        animation-direction: $direction;
      }
    }
    @else {
      -webkit-animation-name: $animation_name;
      -webkit-animation-duration: $duration;
      -webkit-animation-timing-function: $animation_timing_function;
      -webkit-animation-delay: $delay;
      -webkit-animation-fill-mode: $fillmode;
      -webkit-animation-direction: $direction;
  
      -moz-animation-name: $animation_name;
      -moz-animation-duration: $duration;
      -moz-animation-timing-function: $animation_timing_function;
      -moz-animation-delay: $delay;
      -moz-animation-fill-mode: $fillmode;
      -moz-animation-direction: $direction;
  
      animation-name: $animation_name;
      animation-duration: $duration;
      animation-timing-function: $animation_timing_function;
      animation-delay: $delay;
      animation-fill-mode: $fillmode;
      animation-direction: $direction;
    }
  }
  </code></pre>
  
  <p>But as you can observe, a number of lines of code seem to repeat. I tried a method to reduce the duplication but it doesn't seem to work as the code get's localized:</p>
  
  <pre><code>@mixin keyframe ($animation_name, $isGlobal: false) {
    $updated_animation_name: $animation_name;
  
    @if $isGlobal {
      $updated_animation_name: (:global(#{$animation_name}));
    }
  
    @-webkit-keyframes #{$updated_animation_name} {
      @content;
    }
  
    @-moz-keyframes #{$updated_animation_name} {
      @content;
    }
  
    @keyframes #{$updated_animation_name} {
      @content;
    }
  }
  </code></pre>
  
  <p>Is there a solution to minimize the line of code? Thanks in anticipation</p>