countdown.css

.wrapper {
  height: 250px;
  width: 300px;
  background: rgba(0,0,0,.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.round-wrapper {
  opacity: 1;
  height: 80px;
  width: 80px;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: outter-fade linear .25s 1;
  -webkit-animation: outter-fade linear .25s 1;
  -moz-animation: outter-fade linear .25s 1;
  -o-animation: outter-fade linear .25s 1;
  -ms-animation: outter-fade linear .25s 1;
}

.number {
  opacity: 0;
  position: absolute;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 36pt;
  font-family: Helvetica;
  color: #555555;
  -webkit-animation-timing-function: cubic-bezier(.165,0.84,.44,1);
  animation-timing-function: cubic-bezier(.165,0.84,.44,1);
}
.circle {
  position: absolute;
  opacity: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation-timing-function: cubic-bezier(.165,0.84,.44,1);
  animation-timing-function: cubic-bezier(.165,0.84,.44,1);
}
.circle-one{
  animation: breath-one .9s 1;
  -webkit-animation: breath-one .9s 1;
  -moz-animation: breath-one .9s 1;
  -o-animation: breath-one .9s 1;
  -ms-animation: breath-one .9s 1;
}
.circle-two{
  animation: breath-two 1.8s 1;
  -webkit-animation: breath-two 1.8s 1;
  -moz-animation: breath-two 1.8s 1;
  -o-animation: breath-two 1.8s 1;
  -ms-animation: breath-two 1.8s 1;
}
.circle-three{
  animation: breath-three 2.7s 1;
  -webkit-animation: breath-three 2.7s 1;
  -moz-animation: breath-three 2.7s 1;
  -o-animation: breath-three 2.7s 1;
  -ms-animation: breath-three 2.7s 1;
}

@keyframes outter-fade{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes breath-one{
  0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(.02) scaleY(.02) ;
  }
  80% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
  }
}

@keyframes breath-two{
  0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    transform:  rotate(0deg) scaleX(.02) scaleY(.02) ;
  }
  90% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
  }
}
@keyframes breath-three{
  0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  67% {
    opacity:1;
    transform:  rotate(0deg) scaleX(.02) scaleY(.02) ;
  }
  93% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
  }
}

.number.one{
  animation: number-one .9s 1;
  -webkit-animation: number-one .9s 1;
  -moz-animation: number-one .9s 1;
  -o-animation: number-one .9s 1;
  -ms-animation: number-one .9s 1;
}
.number.two{
  animation: number-two 1.8s 1;
  -webkit-animation: number-two 1.8s 1;
  -moz-animation: number-two 1.8s 1;
  -o-animation: number-two 1.8s 1;
  -ms-animation: number-two 1.8s 1;
}
.number.three{
  animation: number-three 2.7s 1;
  -webkit-animation: number-three 2.7s 1;
  -moz-animation: number-three 2.7s 1;
  -o-animation: number-three 2.7s 1;
  -ms-animation: number-three 2.7s 1;
}

@keyframes number-one{
  0% {
    opacity:0;
  }
  20% {
    opacity:0;
    transform:  rotate(0deg) scaleX(.5) scaleY(.5) ;
  }
  40% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  80% {
    opacity: 1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1.5) scaleY(1.5) ;
  }
}

@keyframes number-two{
  0% {
    opacity:0;
  }
  60% {
    opacity:0;
    transform:  rotate(0deg) scaleX(.5) scaleY(.5) ;
  }
  70% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  90% {
    opacity: 1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1.5) scaleY(1.5) ;
  }
}
@keyframes number-three{
  0% {
    opacity:0;
  }
  73% {
    opacity:0;
    transform:  rotate(0deg) scaleX(.5) scaleY(.5) ;
  }
  80% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  93% {
    opacity: 1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1.5) scaleY(1.5) ;
  }
}

countdown.html

<div class="wrapper">
  <div class="round-wrapper">
    <div class="circle circle-one"></div>
    <div class="circle circle-two"></div>
    <div class="circle circle-three"></div>
    <div class="one number">1</div>
    <div class="two number">2</div>
    <div class="three number">3</div>
  </div>
</div>