<div id="container">
  <p id="countdown">10</p>
</div>


<div id="curtain-left" class="curtain left">
  <h2>countdownAnimation.currentTime<span>(increasing playbackRate)</span></h2>
  <p>Immediately before finish() call<span id="countdown-time"></span></p>
  <p>When countdownAnimation finished<span id="countdown-time2"></span></p>
</div>
<div id="curtain-right" class="curtain right">
  <h2>containerAnimation.currentTime <span>(normal playbackRate)</span></h2>
  <p>When countdownAnimation finished<span id="container-time"></span></p>
  <p>When containerAnimation finished<span id="container-time2"></span></p>
</div>

$dark: #333;
$light: #fafafb;
$red: #922;
$green: #226342;
$blue: #224263;
$yellow: #c92;
$orange: #c65;
$greenBlue: #299;
$background: $blue;

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  background: $background;
  font-family: Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
#container {
  z-index: 1;
}
#countdown {
  font-size: 10rem;
  color: $light;
  font-weight: 600;
}
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
  transition: transform .35s ease-out;
  z-index: 0;
  text-align: center;
  color: $light;
  line-height: 1.4;
  
  &.left {
    left: 0;
    transform: translateY(-100%);
    background-color: $greenBlue;
  }
  &.right {
    right: 0;
    transform: translateY(100%);
    background-color: $green;
  }
  &.closed {
    transform: translateY(0);
  }
  h2 {
    width: 60%;
    display: inline-block;
    font-weight: 600;
    margin-top: 2em;
  }
  p {
    width: 60%;
    display: inline-block;
    margin-top: 2em;
  }
  span {
    display: block;
  }
}

/*
#container will shrink for as many seconds as is specified in the #countdown element text.

#countdown will pulse via scale and opacity for a unusually long time (500 seconds)

A setInterval changes the countdown value (in addition to increasing the animation’s playbackRate by 15%) every 1000 milliseconds. Once the timer reaches zero it will finish the #countdown animation.

Stats about the currentTime will be shown at the end.

What to expect:
If the timer is set to 1 then currentTime values before #countdown’s animation finishes will match (because playbackRate was not increased).
Any higher starting number will result in a #countdown animation currentTime being higher than the container
*/
var clock = document.getElementById('countdown');
var container = document.getElementById('container');
var curtains = document.querySelectorAll('.curtain');
var time = parseInt(clock.textContent, 10);
var containerTimeBefore = document.getElementById('container-time');
var containerTimeAfter = document.getElementById('container-time2');
var countdownTimeBefore = document.getElementById('countdown-time');
var countdownTimeAfter = document.getElementById('countdown-time2');

var countdownAnimation = clock.animate([
  {opacity: 1, transform: 'scale(.6)'},
  {opacity: .5, transform: 'scale(1)'}
], {
  duration: 500,
  easing: 'linear',
  delay: 0,
  iterations: 1000, //Infinity,
  direction: 'alternate',
  fill: 'forwards'
});
var containerAnimation = container.animate([
  {transform: 'scale(1)'},
  {transform: 'scale(.2)'}
], {
  duration: time * 1000,
  easing: 'linear',
  delay: 0,
  iterations: 1,
  //fill: 'forwards'
});

countdownAnimation.onfinish = function() {
  clearInterval(interval);
  curtains[0].classList.add('closed');
  curtains[1].classList.add('closed');
  var wrapup = clock.animate([
    {opacity: 0, transform: 'scale(.01) rotate(-10deg)', offset: 0},
    {opacity: 1, transform: 'scale(1.2) rotate(7deg)', offset: .8},
    {opacity: 1, transform: 'scale(1) rotate(0deg)', offset: 1}
  ], {
    duration: 1000,
    easing: 'ease-in-out',
    delay: 0,
    iterations: 1,
    fill: 'forwards'
  });
  wrapup.playbackRate = .6;
  clock.textContent = '0';
  
  countdownTimeAfter.textContent = countdownAnimation.currentTime;
}
containerAnimation.onfinish = function() {
  containerTimeAfter.textContent = containerAnimation.currentTime;
}

var interval = setInterval(function() {
  time = time - 1;
  clock.textContent = time;
  if (time > 0) {
    countdownAnimation.playbackRate = Math.min(countdownAnimation.playbackRate * 1.15, 6);
  } else {
    containerTimeBefore.textContent = containerAnimation.currentTime;
    countdownTimeBefore.textContent = countdownAnimation.currentTime;
    countdownAnimation.finish();
  }
}, 1000);