@keyframes sin-logo-1{
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(180deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sin-logo-2{
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(-180deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes sin-logo-3{
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(720deg); }
}
/*消える,opasityより*/
@keyframes opas {
  0% { opacity: 1; box-shadow: 0 0 0 rgba(150,200,200,0.5); border-radius: 50%; transform: scale(1); }
  50% { opacity: 0.5; box-shadow: 0 0 100px rgba(150,200,200,0.5); transform: scale(1.25); }
  100% { opacity: 0; box-shadow: 0 0 200px rgba(150,200,200,0.5); transform: scale(1.5); }
}
@keyframes opas-sin{
  0% { opacity: 1; box-shadow: 0px 0px 0px rgba(150,200,200,0.5); border-radius: 10%; transform: translate(-330%, -330%) scale(1);}
  50% { opacity: 0.5; box-shadow: 0px 0px 100px rgba(150, 200, 200, 0.5); transform: translate(-330%, -330%) scale(1.25);}
  100% { opacity: 0; box-shadow: 0px 0px 200px rgba(150, 200, 200, 0.5); transform: translate(-330%, -330%) scale(1.5);}
}
/*内側アニメーション*/


.sin-logo.active{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
.circle1.active{
  animation: 
    sin-logo-1 8s linear 0s 2;/*name duration function delay iteration-count*/
}  
.circle2.active{
  animation:
    sin-logo-2 8s linear 0s 2;
}
.circle3.active{
  animation:
    sin-logo-3 8s linear 0s 2;
}


.circle1pa.active{
  animation: /*name duration function delay iteration-count*/
    opas 3s linear 10s 1 forwards;
}  
.circle2pa.active{
  animation:
    opas 3s linear 10s 1 forwards;
}
.circle3pa.active{
  animation:
    opas 3s linear 10s 1 forwards;
}



.sin.active{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-330%, -330%);
  scale: 15%;
  animation:opas-sin 3s linear 10s 1 forwards;
}
.circle1pa,
.circle2pa,
.circle3pa{
  position: absolute;
  transform-origin: center;
  top: 50%;
  left: 50%;
  transform: scale(100%);
}