Próbuję animować przechylanie obiektów, a następnie ustawiony w prawo. Mój javascript wygląda tak:

function animate-tip(){
  document.getElementById("x").animate(
  [0% { transform: "rotate(0deg)"},
   30% { transform: "rotate(30deg)"},
   100% { transform: "rotate(0deg)"}],
   {
     duration: 500,
     iterations: 1
   })

Oczywiście jest to nieprawidłowa składnia. Jak mogę wykonać tę animację pracować przez procenty?

0
Mr No 9 październik 2020, 02:02

1 odpowiedź

Najlepsza odpowiedź

Robisz to z właściwością offsetową. Musi wynosić od 0 do 1, więc po prostu przekonwertuj procenty, dzieląc się przez 100.

function animateTip() {
  document.getElementById("x").animate(
    [{
        transform: "rotate(0deg)"
      },
      {
        transform: "rotate(30deg)", offset: 0.3,
      },
      {
        transform: "rotate(0deg)"
      }
    ], {
      duration: 3500,
      iterations: 1
    })
}

animateTip();
#x {
  padding: 10px;
  background: chartreuse;
  display: inline-block;
  width: 100px;
  height: 100px;
}
<div id="x"></div>
1
Richard Hunter 8 październik 2020, 23:19