Istilah tweening berasal dari "di antara", istilah animasi tradisional yang digunakan untuk menjelaskan proses ini. Tweening (juga disebut interpolasi) secara signifikan mengurangi waktu yang diperlukan untuk membuat efek animasi seperti fading in atau fading out, atau memindahkan elemen melintasi bingkai. Anda dapat mengedit bingkai tween satu per satu setelah Anda membuatnya
Anda menggunakan perintah Tween untuk secara otomatis menambahkan atau memodifikasi serangkaian bingkai di antara dua bingkai yang ada—memvariasikan properti lapisan (parameter posisi, opasitas, atau efek) secara merata di antara bingkai baru untuk menciptakan tampilan gerakan. Misalnya, jika Anda ingin menghilangkan lapisan, atur opacity lapisan di bingkai awal menjadi 100%; . Saat Anda melakukan tween di antara dua frame, opacity layer berkurang secara merata di seluruh frame baru
Seringkali nyaman untuk menggunakan properti steno animation untuk mengatur semua properti animasi sekaligus
/* Single animation */ animation-duration: 6s; animation-duration: 120ms; /* Multiple animations */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms; /* Global values */ animation-duration: inherit; animation-duration: initial; animation-duration: revert; animation-duration: revert-layer; animation-duration: unset;
<time>
Waktu yang diperlukan animasi untuk menyelesaikan satu siklus. Ini dapat ditentukan dalam detik (s) atau milidetik (ms). Nilainya harus positif atau nol dan satuannya wajib diisi
Jika tidak ada nilai yang diberikan, nilai default 0s digunakan, dalam hal ini animasi masih dijalankan (peristiwa animation-duration =
<time [0s,∞]>#
0 dan animation-duration =
<time [0s,∞]>#
1 dipecat). Apakah animasi akan terlihat atau tidak saat durasi 0s akan bergantung pada nilai animation-duration =
<time [0s,∞]>#
3, seperti yang dijelaskan di bawah
- Jika animation-duration =
<time [0s,∞]>#
_3 disetel ke animation-duration =
<time [0s,∞]>#
5 atau animation-duration =
<time [0s,∞]>#
6, bingkai pertama animasi seperti yang ditentukan oleh animation-duration =
<time [0s,∞]>#
7 akan ditampilkan selama animation-duration =
<time [0s,∞]>#
8 hitungan mundur - Jika animation-duration =
<time [0s,∞]>#
_3 disetel ke <div class="box"></div> 0 atau animation-duration =
<time [0s,∞]>#
6, bingkai terakhir animasi akan ditampilkan, seperti yang ditentukan oleh animation-duration =
<time [0s,∞]>#
7, setelah animation-duration =
<time [0s,∞]>#
8 kedaluwarsa - Jika animation-duration =
<time [0s,∞]>#
_3 disetel ke <div class="box"></div> 5, animasi tidak akan memiliki efek yang terlihat
Catatan. Nilai negatif tidak valid, menyebabkan deklarasi diabaikan. Beberapa implementasi awal, diawali, mungkin menganggapnya identik dengan 0s
Catatan. Saat Anda menentukan beberapa nilai yang dipisahkan koma pada properti <div class="box"></div> 7, nilai tersebut diterapkan ke animasi dalam urutan kemunculan <div class="box"></div> 8. Untuk situasi di mana jumlah animasi dan nilai properti <div class="box"></div> 7 tidak cocok, lihat
Nilai awal 0s Berlaku untuk semua elemen, .box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } 1 dan .box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } 2 pseudo-elementsInheritednoComputed valueas definedAnimation typeNot animatable