body { 
            background: url("https://storage.needpix.com/rsynced_images/table-place-setting.jpg") no-repeat center center fixed; 
            background-size: contain;
          }

 .container{ position: absolute;
top: 190px;
left: 475px;
animation: 7s linear infinite spin;
transform-origin: center }         

          @keyframes spin {
                from { 
                transform: rotate(0deg) 
            }
                to { transform: rotate(360deg)}
            }

            .slice {
                position: absolute;
                top: 12px;
                left: 100x;
                z-index: 10000;
                transform-origin: center;
                width: 0;
                height: 0;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top-left-radius: 20%;
                border-top-right-radius: 30%;
                border-top: 250px solid black;
                transform: rotate(324deg);
                transform-origin: 60% 10%;
                animation-name:  yes;
                animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
 
            }   

            .second {
                position: absolute;
                top: 380px;
                left: -10px;
                z-index: 10000;
                transform-origin: center;
                width: 0;
                height: 0;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top-left-radius: 20%;
                border-top-right-radius: 30%;
                border-top: 250px solid black;
                transform: rotate(205deg);
                transform-origin: 60% 10%;
                animation-name:  yes;
                animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
            }   

            .third {
                position: absolute;
                top: 200px;
               left: 315px;
                z-index: 10000;
                transform-origin: center;
                width: 0;
                height: 0;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top-left-radius: 20%;
                border-top-right-radius: 30%;
                border-top: 250px solid black;
                transform: rotate(85deg);
                transform-origin: 60% 10%;
                animation-name:  yes;
                animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
            } 

            .fourth {
                position: absolute;
                top: 220px;
               left: -150px;
                z-index: 10000;
                transform-origin: center;
                width: 0;
                height: 0;
                border-left: 140px solid transparent;
                border-right: 140px solid transparent;
                border-top-left-radius: 20%;
                border-top-right-radius: 30%;
                border-top: 250px solid black;
                transform: rotate(260deg);
                transform-origin: 60% 10%;
                animation-name:  yes;
                animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
            } 

        

            @keyframes yes {
                0% {
                    visibility: hidden;}
                20% {visibility: hidden;}
                40%{visibility: hidden;}
               100% {
                visibility: visible;
               } 
            }