countdown.css

@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translateY(-2px) rotate(.5deg);
    transform: translateY(-2px) rotate(.5deg)
  }

  20%, 80% {
    -webkit-transform: translateY(2px) rotate(-.5deg);
    transform: translateY(2px) rotate(-.5deg)
  }

  30%, 50%, 70% {
    -webkit-transform: translateY(-5px) rotate(.5deg);
    transform: translateY(-5px) rotate(.5deg)
  }

  40%, 60% {
    -webkit-transform: translateY(5px) rotate(-.5deg);
    transform: translateY(5px) rotate(-.5deg)
  }

  95% {
    opacity: 0
  }

  to {
    opacity: 0
  }
}

@keyframes shake {
  10%, 90% {
    -webkit-transform: translateY(-2px) rotate(.5deg);
    transform: translateY(-2px) rotate(.5deg)
  }

  20%, 80% {
    -webkit-transform: translateY(2px) rotate(-.5deg);
    transform: translateY(2px) rotate(-.5deg)
  }

  30%, 50%, 70% {
    -webkit-transform: translateY(-5px) rotate(.5deg);
    transform: translateY(-5px) rotate(.5deg)
  }

  40%, 60% {
    -webkit-transform: translateY(5px) rotate(-.5deg);
    transform: translateY(5px) rotate(-.5deg)
  }

  95% {
    opacity: 0
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes pulse {
  10% {
    -webkit-transform: scale(.95);
    transform: scale(.95)
  }

  95% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
      opacity: 0
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0
  }
}

@keyframes pulse {
  10% {
    -webkit-transform: scale(.95);
    transform: scale(.95)
  }

  95% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0
  }
}

* {
  padding: 0;
  margin: 0;
  color: #fff;
  text-decoration: none
}

body, html {
  height: 100%;
  overflow: hidden;
  background-color: #347bde;
  font-family: Arial, Helvetica, Verdana
}

#timer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 65vmin;
  line-height: 100vh;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: all .5s ease-in-out 1s
}

#timer.started {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0)
}

#timer.started ~ .timer-options {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%)
}

#timer.warning {
  background-color: #c40016;
  transition: background-color 25s ease
}

#timer.shake .countdown {
  display: block;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

#timer.finished .countdown {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-iteration-count: 5;
  animation-iteration-count: 5;
  -webkit-animation-name: pulse;
  animation-name: pulse
}

.timer-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 100%;
  text-align: center;
  font-size: 35vmin;
  line-height: 100vh;
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: all .5s ease-in-out 1s
}

.close {
  position: absolute;
  right: 50px;
  top: 50px;
  font-size: 80px;
  line-height: 80px
}