countdown.css

/*!countdown.css
 * This stylesheet contains the style for the 'newyear-countdown'
 * project.
 *
 * Z-index order:
 * 0    Body
 * 1    Background
 * 2    Countdown
 */
/* --< Basic Style >-- */
html, body {
  height: 100%;
}

body {
  background-color: #001326;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  padding: 0;
  z-index: 0;
}

/* --< The Countdown >-- */
@-webkit-keyframes cd-flowin {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes cd-flowin {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@-webkit-keyframes cd-new-year-title {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: green;
  }
}

@keyframes cd-new-year-title {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: green;
  }
}

@-webkit-keyframes bg-move-cloud {
  0% {
    left: -250px;
  }
  100% {
    left: 105%;
  }
}

@keyframes bg-move-cloud {
  0% {
    left: -250px;
  }
  100% {
    left: 105%;
  }
}

@-webkit-keyframes bg-pulse-moon {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}

@keyframes bg-pulse-moon {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}

#cd {
  -webkit-animation: cd-flowin 4s ease 1s forwards;
          animation: cd-flowin 4s ease 1s forwards;
  display: inline-block;
  left: 50%;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 50%;
  width: 90%;
  max-width: 500px;
  z-index: 2;
}

#cd .cd__title {
  color: #ebebeb;
  font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", cursive, sans-serif;
  font-size: 2.2em;
  font-weight: 700;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#cd .cd__title.cd__title--newyear {
  -webkit-animation: cd-new-year-title 3s ease alternate infinite;
          animation: cd-new-year-title 3s ease alternate infinite;
}

#cd .cd__ele {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  display: inline-block;
  padding: 5% 3.5%;
}

#cd .cd__ele .cd__ele__value {
  display: block;
  font-size: 3.1em;
}

#cd .cd__ele .cd__ele__name {
  font-size: 0.85em;
  font-style: italic;
}

#cd .cd__ele--secs {
  color: #57a300;
}

#cd .cd__timetil {
  margin-top: 2%;
}

/* --< Background >-- */
#bg {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1;
}

#bg * {
  position: fixed;
}

#bg__moon {
  -webkit-animation: bg-pulse-moon 4s linear 0s alternate infinite;
          animation: bg-pulse-moon 4s linear 0s alternate infinite;
  right: 2%;
  top: 2%;
}

#bg__grass {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#bg__city {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#bg__cloud1 {
  -webkit-animation: bg-move-cloud 48s linear -12s alternate infinite;
          animation: bg-move-cloud 48s linear -12s alternate infinite;
  top: 9%;
}

#bg__cloud2 {
  -webkit-animation: bg-move-cloud 60s linear -78s alternate infinite;
          animation: bg-move-cloud 60s linear -78s alternate infinite;
  top: 23%;
}

#bg__cloud3 {
  -webkit-animation: bg-move-cloud 80s linear -78s alternate infinite;
          animation: bg-move-cloud 80s linear -78s alternate infinite;
  top: 15%;
}