Film Countdown in SCSS

_countdown.scss

// Animation: Timer
// -------------------------------

// Sized for iPhone 6 .timer correct position should be set with JS
$timer-screen-width: 375px; // top: ($timer-screen-height - $timer-size) / 2;
$timer-screen-height: 667px;// left: ($timer-screen-width - $timer-size) / 2;

$timer-size: 800px;
$timer-opacity: .5;
$timer-countdown-opacity: .9;
$timer-background: #B9B7AE;
$timer-fill: #574536;
$timer-countdown-size: 200px;
$timer-font-size: 140px;
$timer-count: 7;
$timer-rotation-duration: 1.5;
$timer-animation-duration: $timer-count * $timer-rotation-duration;

.countdown-animation {
  .pane-background {
    -webkit-filter: brightness(100%); // Temp, just to overide the current value
  }
  .timer-holder {
    background-color: $timer-background;
    height: 100%;
    position: relative;
    opacity: $timer-opacity;
  }
  .timer {
    background-color: $timer-background;
    height: $timer-size;
    width: $timer-size;
    position: absolute;
    top: ($timer-screen-height - $timer-size) / 2;
    left: ($timer-screen-width - $timer-size) / 2;
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      width: 2px;
      height: 100%;
      right: 50%;
      z-index: 5;
      background-color: white;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      height: 2px;
      width: 100%;
      z-index: 5;
      background-color: white;
    }
  }

  .timer-pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background-color: $timer-fill;
  }

  .timer-spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 2;
    border-right: none;
    animation: timer-rotation #{$timer-rotation-duration}s linear infinite;
  }

  .timer:hover .timer-spinner,
  .timer:hover .timer-filler,
  .timer:hover .timer-mask {
    animation-play-state: running;
  }

  .timer-filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    z-index: 4;
    animation: timer-opacity #{$timer-rotation-duration}s steps(1, end) infinite reverse;
    border-left: none;
  }

  .timer-mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 3;
    animation: timer-opacity #{$timer-rotation-duration}s steps(1, end) infinite;
  }

  .timer-count {
    display: block;
    opacity: $timer-countdown-opacity;
    font-size: $timer-font-size;
    line-height: $timer-countdown-size;
    width: $timer-countdown-size;
    height: $timer-countdown-size;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0 auto;
    text-align: center;
    &::after {
      content: "";
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      border: 4px solid #FFF;
      border-radius: 100%;
    }
    &::before {
      content: "7\A 6\A 5\A 4\A 3\A 2\A 1\A";
      display: block;
      position: absolute;
      width: $timer-countdown-size;
      white-space: pre;
      animation: timer-count steps(#{$timer-count}) infinite;
      animation-duration: #{$timer-animation-duration}s;
    }
  }
}

@keyframes timer-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes timer-opacity {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes timer-count {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-($timer-countdown-size * $timer-count));
  }
}

countdown.html

<div class="countdown-animation">
  <div class="pane pane-dark">
    <div class="pane-background pane-background-fop">
      <div class="timer-holder">
        <div class="timer-count"></div>
        <div class="timer">
          <div class="timer-pie timer-spinner"></div>
          <div class="timer-pie timer-filler"></div>
          <div class="timer-mask"></div>
        </div>
      </div>
    </div>
  </div>
</div>