.pizza-animation {
    position: absolute;
    display: block;
    width: 85px;
    height: 85px;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0
}

.pizza-animation .pizza-slice {
    position: absolute;
}

.pizza-animation .pizza-slice svg {
    width: 40px;
    height: 40px;
}

.pizza-animation .pizza-slice:nth-child(1) {
    transform: translate(0px, 0px) rotate(0deg);
}

.pizza-animation .pizza-slice:nth-child(2) {
    transform: translate(8px, 22px) rotate(45deg);
}

.pizza-animation .pizza-slice:nth-child(3) {
    transform: translate(-1px, 44px) rotate(90deg);
}

.pizza-animation .pizza-slice:nth-child(4) {
    transform: translate(-23px, 53px) rotate(135deg);
}

.pizza-animation .pizza-slice:nth-child(5) {
    transform: translate(-44px, 44px) rotate(180deg);
}

.pizza-animation .pizza-slice:nth-child(6) {
    transform: translate(-53px, 22px) rotate(225deg);
}

.pizza-animation .pizza-slice:nth-child(7) {
    transform: translate(-44px, 0px) rotate(270deg);
}

.pizza-animation .pizza-slice:nth-child(8) {
    transform: translate(-22px, -9px) rotate(315deg);
}

.pizza-animation.active-anim .pizza-slice:nth-child(1) {
    animation: slice-1 .3s ease 0s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(2) {
    animation: slice-2 .3s ease .2s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(3) {
    animation: slice-3 .3s ease .4s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(4) {
    animation: slice-4 .3s ease .8s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(5) {
    animation: slice-5 .3s ease 1s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(6) {
    animation: slice-6 .3s ease 1.2s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(7) {
    animation: slice-7 .3s ease 1.4s 2 alternate;
}

.pizza-animation.active-anim .pizza-slice:nth-child(8) {
    animation: slice-8 .3s ease 1.8s 2 alternate;
}

@keyframes slice-1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(8px, -8px) rotate(0deg);
    }
}

@keyframes slice-2 {
    0% {
        transform: translate(8px, 22px) rotate(45deg);
    }
    100% {
        transform: translate(18px, 22px) rotate(45deg);
    }
}

@keyframes slice-3 {
    0% {
        transform: translate(-1px, 44px) rotate(90deg);
    }
    100% {
        transform: translate(8px, 50px) rotate(90deg);
    }
}

@keyframes slice-4 {
    0% {
        transform: translate(-23px, 53px) rotate(135deg);
    }
    100% {
        transform: translate(-23px, 62px) rotate(135deg);
    }
}

@keyframes slice-5 {
    0% {
        transform: translate(-44px, 44px) rotate(180deg);
    }
    100% {
        transform: translate(-52px, 52px) rotate(180deg);
    }
}

@keyframes slice-6 {
    0% {
        transform: translate(-53px, 22px) rotate(225deg);
    }
    100% {
        transform: translate(-63px, 22px) rotate(225deg);
    }
}

@keyframes slice-7 {
    0% {
        transform: translate(-44px, 0px) rotate(270deg);
    }
    100% {
        transform: translate(-50px, -5px) rotate(270deg);
    }
}

@keyframes slice-8 {
    0% {
        transform: translate(-22px, -9px) rotate(315deg);
    }
    100% {
        transform: translate(-22px, -18px) rotate(315deg);
    }
}