Latihan 1: CSS Keyframes — Web Animation

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

Lengkapi dua function yang merakit CSS animasi sebagai string satu baris.

  1. buildKeyframes(name, steps): steps adalah array objek { percent, properties }, dan properties adalah objek CSS seperti { opacity: 0 }. Tiap properti jadi properti: nilai;, beberapa properti dipisah satu spasi. Tiap langkah jadi percent% { ... }. Semua langkah dipisah satu spasi, lalu dibungkus @keyframes name { ... }.
  2. buildAnimationShorthand(name, duration, easing, iterationCount) mengembalikan keempat argumen dengan urutan itu, dipisah satu spasi.

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

  1. @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
  2. @keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }
  3. fadeIn 0.5s ease-out 1
  4. spin 1s linear infinite

Nilai kembaliannya juga dinilai langsung: buildKeyframes("pop", [{ percent: 0, properties: { transform: "scale(1)", opacity: 0.5 } }]) harus "@keyframes pop { 0% { transform: scale(1); opacity: 0.5; } }", dan buildAnimationShorthand("pulse", "2s", "ease-in-out", 3) harus "pulse 2s ease-in-out 3".

Hint