Properti Transition CSS adalah properti singkatan untuk mengatur properti long-hand: Transition-properti, Transition-durasi, Transition-timing-function, dan Transition-delay.
Urutan properti dalam properti transisi adalah penting, dan harus memiliki urutan yang sama seperti yang disebutkan di atas. Nilai pertama yang dapat diuraikan sebagai waktu ditugaskan ke durasi transisi, dan nilai kedua yang dapat diuraikan sebagai waktu ditugaskan untuk transisi-delay.
Kalian dapat menentukan salah satu transisi dalam property Transition, atau beberapa Transition yang dipisahkan koma. Sebagai contoh:
|
1 2 3 4 5 6 7 |
/* one transition */ transition: background-color .3s linear; /* multiple transitions */ transition: color .6s ease, font-size .3s linear; transition: background-color 1s linear, left .6s ease-out 1s, transform 1s steps(3, start); |
Jika kalian menetapkan lebih dari satu transisi dan salah satu transisi tidak memiliki transisi sebagai properti, maka deklarasinya tidak valid.
Penulisan Official Syntax
|
1 2 3 |
transition: <single-transition> [ ',' <single-transition> ] * where <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time> |
- Initial:Â tidak ada 0s memudahkan 0s; yang merupakan gabungan dari nilai awal dari masing-masing properti longhand.
- Applies To: Semua Element; dan
::beforeserta::afterpseudo-element.
Berikut ini mendefinisikan dua transisi pada suatu elemen: memindahkan posisinya dan mengubah background-color ketika itu berpindah. Transisi perubahan dalam Background-color terjadi setelah transisi posisi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #F5F5F5; color: #555; font-size: 1.1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { margin: 50px auto; max-width: 700px; padding: 30px; border: 1px solid #aaa; background-color: white; } .element { padding: 20px; width: 100px; height: 100px; left: 0; background-color: purple; position: relative; -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s; transition: left 1s ease-in-out, background-color 1s ease-out 1s; } .container:hover .element { left: 500px; background-color: #009966; } .element-2 { -webkit-transition: none; transition: none; } </style> </head> <body> <div class="container"> <p>Hover container untuk melihat perubahan background-color menggunakan transition</p> <div class="element element-1"></div> <p> Tanpa Transition </p> <div class="element element-2"></div> </div> </body> </html> |