Rumah >hujung hadapan web >tutorial css >Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?

Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-07 16:04:12851semak imbas

Can JavaScript Dynamically Modify CSS Animation Parameters?

Mengparameterkan Animasi CSS dengan JavaScript

Soalan:

Dalam kod animasi CSS yang disediakan, adakah mungkin untuk mengubah suai secara dinamik margin-kiri dan nilai lebar melalui JavaScript?

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Jawapan:

Ya, ada cara untuk menghantar nilai kepada animasi CSS daripada JavaScript dengan menggunakan pembolehubah CSS.

.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript:

// Set CSS variables using JavaScript
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

Pendekatan ini membolehkan anda mengawal parameter animasi secara dinamik melalui JavaScript, membolehkan lebih fleksibiliti dan penyesuaian.

Atas ialah kandungan terperinci Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn