Hallo.

ich habe jetzt schon ein bisschen programmiert, aber habe ein Problem.

Ich habe eine Animation gemacht, sodass sich etwas bewegt. Ich will aber auch, dass es sich gleichzeitig dreht. Aber man kann nur eine Animation in CSS haben.

Deshalb muss ich wissen, wie man eine Animation in JavaScript macht.

Hier ist mein Beispiel:

#c {
  position: absolute;
  width: 50px;
  height: 50px;
  animation: rotate 5s 1 5s;
  animation: hei 5s 1 0s linear forwards;
}

@keyframes hei {
  11% { transform: translate(0px, 0px) }
  22% { transform: translate(510px, 0px) }
  33% { transform: translate(510px, 80px) }
  44% { transform: translate(308px, 80px) }
  55% { transform: translate(308px, 145px) }
  66% { transform: translate(580px, 145px) }
  77% { transform: translate(580px, 0px) }
  88% { transform: translate(580px, 145px); }
  95% { transform: translate(500px, 145px); }
  100% { transform: translate(500px, 260px); }
}

@keyframes rotate {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(160deg) }
  100% { transform: rotate(300deg) }
}

Das sind die zwei Animationen.