.bild {
  animation-name: weinachten;

  animation-iteration-count: infinite;

  animation-duration: 2s;

  position: absolute;

  background-image: url(../fotos/Hintergrund.png);

  left: 225px;
}

@keyframes weinachten {
  0% {
    opacity: 100;
  }

  24% {
    opacity: 100;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.bild2 {
  animation-name: weinachten2;

  animation-iteration-count: infinite;

  animation-duration: 2s;

  position: absolute;

  left: 225px;
}

@keyframes weinachten2 {
  0% {
    opacity: 0;
  }

  23% {
    opacity: 0;
  }

  24% {
    opacity: 100;
  }

  49% {
    opacity: 100;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.bild3 {
  animation-name: weinachten3;

  animation-iteration-count: infinite;

  animation-duration: 2s;

  position: absolute;

  left: 225px;
}

@keyframes weinachten3 {
  0% {
    opacity: 0;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 100;
  }

  74% {
    opacity: 100;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.bild4 {
  animation-name: weinachten4;

  animation-iteration-count: infinite;

  animation-duration: 2s;

  position: absolute;

  left: 225px;
}

@keyframes weinachten4 {
  0% {
    opacity: 0;
  }

  73% {
    opacity: 0;
  }

  74% {
    opacity: 100;
  }

  100% {
    opacity: 100;
  }
}

.schnee {
  left: 225px;

  position: absolute;
}

.Kanone {
  position: absolute;

  top: 820px;

  left: 600px;

  width: 350px;

  height: 350px;
}

.Geschenk {
  position: absolute;

  top: 820px;

  left: 620px;

  width: 150px;

  height: 150px;

  animation-name: Geschenk;

  animation-iteration-count: infinite;

  animation-duration: 2s;
}

@keyframes Geschenk {
  0% {
  }

  30% {
    top: 820px;
    left: 620px;
    width: 150px;
    height: 150px;
  }

  100% {
    left: -400px;
    top: 300px;
    transform: rotate(-1100deg);
    width: 550px;
    height: 550px;
  }
}

.Weinachtsmann {
  position: absolute;

  left: 820px;

  top: 650px;

  height: 400px;

  width: 700px;
}

.arm {
  position: absolute;

  height: 300px;

  width: 500px;

  left: 735px;

  top: 700px;

  animation-name: Arm;

  animation-iteration-count: infinite;

  animation-duration: 2s;

  transform-origin: right;
}

@keyframes Arm {
  0% {
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
  }
}

.arm2 {
  position: absolute;

  height: 300px;

  width: 500px;

  left: 1000px;

  top: 705px;

  transform-origin: left;

  animation-name: Arm2;

  animation-iteration-count: infinite;

  animation-duration: 2s;
}

@keyframes Arm2 {
  0% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(180deg);
  }
}