DEMO

HTML

		<div class="container">
  <div class="rotation"></div>
  <div class="circle"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="count">
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
  </div>
  <div class="black_out"></div>
  <div class="text_pop"><p>コメントが入ります。</p></div>
</div>
		

HTML説明

文字の変更方法
「<p>~</p>（19行目）」の間の文字を任意のものに編集してください。

CSS

		<style>
.container{
  position:relative;
  width: 100%;
  height: 350px;
  background: #a0a0a0;
  overflow: hidden;
  animation: black-out 1s 10s linear;
}
.count p{
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 0;
  padding: 0;
  color: #a0a0a0;
  font-size: 100px;
  font-weight: bold;
  opacity:0;
}
.count p:nth-child(1) {
  animation: count-down 1s 0s;
}
.count p:nth-child(2) {
  animation: count-down 1s 1s;
}
.count p:nth-child(3) {
  animation: count-down 1s 2s;
}
.count p:nth-child(4) {
  animation: count-down 1s 3s;
}
.count p:nth-child(5) {
  animation: count-down 1s 4s;
}
.count p:nth-child(6) {
  animation: count-down 1s 5s;
}
.count p:nth-child(7) {
  animation: count-down 1s 6s;
}
.count p:nth-child(8) {
  animation: count-down 1s 7s;
}
.count p:nth-child(9) {
  animation: count-down 1s 8s;
}
.count p:nth-child(10) {
  animation: count-down 1s 9s;
}
@keyframes count-down {
  0%,100% {opacity:1;}
}
.circle{
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border: double 15px #a0a0a0;
  border-radius: 50%;
}
.line1{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #a0a0a0;
}
.line2{
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #a0a0a0;
}
.rotation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  box-sizing: border-box;
  width: 1500px;
  height: 1500px;
  border-radius: 50%;
  background: #606060;
  background-image: linear-gradient(to right, #797979 50%, transparent 0);
}
.rotation::before{ 
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  background: #797979;
  transform: rotate(0turn);
  animation: rotation1 .5s linear 20, rotation2 1s step-end 10;
}
@keyframes rotation1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@keyframes rotation2 {
  0% { background: #797979; }
  50% { background: #606060; }
}
.black_out{
  position: absolute;
  width: 100%;
  height: 100%;
  animation: black-out .5s 10s linear forwards;
}
@keyframes black-out {
  100% { background: #000; }
}
.text_pop{
  width: 100%;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 0;
  padding: 0;
  color: #fbfbfb;
  font-size: 40px;
  font-weight: bold;
  opacity:0;
  animation: text-pop 1s 11s linear forwards;
}
@keyframes text-pop {
  100% {opacity:1;}
}
</style>
		

CSS説明

こちらは特に編集する必要はありません。
詳しい方は色やフォントなど自由に編集してご使用ください。