Materi
transition menghaluskan perpindahan antara dua keadaan yang dipicu sesuatu, seperti :hover. Gerak yang berjalan sendiri atau punya lebih dari dua titik, seperti lencana Promo yang berdenyut, ditulis dengan @keyframes lalu dipasang lewat properti animation.
@keyframes denyut {
from { transform: scale(1); }
50% { transform: scale(1.08); }
to { transform: scale(1); }
}
.lencana {
animation: denyut 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.lencana { animation: none; }
}@keyframes memberi nama pada daftar titik waktu. from sama dengan 0% dan to sama dengan 100%; persen di antaranya boleh ditambah. Properti animation memanggil nama itu beserta durasinya. Seperti transition, nilai waktu pertama adalah durasi dan yang kedua tunda. infinite membuat animasi berulang terus, sedangkan angka seperti 3 menghentikannya setelah tiga putaran.
Yang digerakkan adalah transform: translate menggeser, scale membesarkan, dan rotate memutar. MDN tidak menganjurkan menganimasikan properti model kotak seperti width atau margin, karena setiap langkahnya memaksa tata letak dihitung ulang dan membebani prosesor.
Gerak membesar dan berulang bisa memicu pusing pada orang dengan gangguan vestibular. Bungkus animation: none di dalam @media (prefers-reduced-motion: reduce) untuk pembaca yang menyalakan pengaturan pengurangan gerak. Lencananya tetap tampil, hanya diam.
