animation

Properti animasi CSS adalah properti singkatan untuk mengatur beberapa properti animasi di satu tempat.

Untuk membuat animasi menggunakan CSS, gunakan properti animasi bersama dengan kata kunci @keyframes yang memungkinkan kamu untuk menentukan efek visual pada animasi kamu.

Properti CSS animation merupakan cara cepat untuk menuliskan kode animasi dengan CSS.

Dengan properti ini memungkinkan kamu untuk menetapkan nilai properti berikut:

• animation-name
• animation-duration
• animation-timing-function
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Namun hanya animation-duration dan animation-name yang diperlukan.

Syntax

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Javascript Syntax

object.style.animation="mymove 5s infinite"

Singkatan properti animasi dipisahkan dengan spasi, dan urutannya tidak masalah kecuali saat menggunakan kedua nilai animation-duration dan animation-delay, urutannya harus sesuai itu.

Jadi, jika kamu menentukan dua nilai waktu dalam definisi animasi, yang pertama akan dianggap sebagai durasi animasi, dan yang kedua akan dianggap sebagai penundaan animasi.

Nilai apa pun yang tidak kamu tetapkan secara eksplisit akan ditetapkan ke nilai standarnya.

Itulah sebabnya kamu harus menentukan nama animasi. Jika tidak, animasi tidak akan diterapkan.

Jika kamu tidak menerapkan durasi animasi, maka akan digunakan nilai default 0s, dan efek animasi terjadi secara instan sehingga keyframes tidak berpengaruh.

Live Demo

Pada contoh berikut saya menerapkan efek “jatuh ke bawah” pada teks menggunakan properti animasi.

See the Pen Contoh LIve Demo Teks Jatuh by Codingku (@codingku) on CodePen.