Latihan 1: CSS Transitions — Web Animation

Latihan 1 dari materi CSS Transitions di Web Animation — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi dua function yang merakit nilai CSS transition sebagai string.

  1. buildTransition(property, duration, easing) mengembalikan ketiga argumen dipisah satu spasi. Contoh: buildTransition("opacity", "0.3s", "ease-out") menghasilkan "opacity 0.3s ease-out". duration sudah membawa satuannya, jadi jangan tambahkan s lagi.
  2. buildMultiTransition(transitions) menerima array objek { property, duration, easing }, merakit tiap objek dengan buildTransition, lalu menggabungkan hasilnya dengan koma dan spasi (", "). Satu objek saja menghasilkan satu transisi tanpa koma.

Empat console.log di kode awal biarkan saja. Yang dinilai, baris console-nya harus persis:

  1. opacity 0.3s ease-out
  2. transform 0.5s ease-in-out
  3. opacity 0.3s ease, transform 0.5s ease-out
  4. background 0.2s linear, color 0.2s linear, border-color 0.3s ease

Nilai kembaliannya juga dinilai langsung: buildMultiTransition([{ property: "width", duration: "1s", easing: "steps(4)" }]) harus "width 1s steps(4)", dan buildTransition("margin-top", "2s", "linear") harus "margin-top 2s linear".

Hint