Keyframe Animation

Here is the relevevant css

#cake {
  animation-name: slidingAround;
  animation-duration: 5000ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@keyframes slidingAround {
  0% {
    transform: translateX(0px);
  }
  48% {
    transform: translateX(600px);
  }
  50% {
    transform: rotateY(180deg) translateX(-600px);
  }
  98% {
    transform: translateX(0px) rotateY(180deg);
  }

  100% {
    transform: translateX(0px);
  }
}

Here is the relevevant css

#lafleur {
  animation-name: upDown;
  animation-duration: 5000ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@keyframes upDown {
  0% {
    transform: translateY(0px);
  }
  48% {
    transform: translateY(100px);
  }
  50% {
    transform: rotateX(180deg) translateX(-100px);
  }
  98% {
    transform: translateY(0px) rotateY(180deg);
  }

  100% {
    transform: translateY(0px);
  }
}