Download Source Code Aplikasi

Membuat Animasi Di Css3

Sunday, August 25th, 2019 - Artikel CSS

Di CSS3 untuk membuat animasi menjadi mungkin. Animasi di buat atas dua komponen:

  1. Menetapkan style-style animasinya dengan properti animation atau dengan properti subnya:
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • animation-fill-mode, dan beberapa properti CSS lainnya kalau memang diperlukan.

    Contoh berikut memutuskan style animasi untuk elemen H1 dengan properti animation:

    h1 { animation: myHeading 5s infinite; }
  2. Menetapkan frame dengan @keyframes rule yang menandai adanya state awal (from) dan selesai (to) dari style animasi itu sendiri.

    Berikut @keyframes rule dipakai untuk menandai adanya state awal dan akhir:

    @keyframes myHeading { from { color: red; } to { color: blue; } }

Coba lihat pada arahan yang diberikan warna merah, mereka itu yaitu nilai-nilai penting yang harus ada:

  • myHeading yaitu nama dari animasi yang di tunjuk oleh @keyframes rule (menetapkan nama dari keyframes).
  • 5s memutuskan banyaknya durasi animasi sebesar 5 detik.
  • from dan to dipakai untuk menandai adanya state awal dan akhir.

IE belum mendukung @keyframes rule atau properti animation.

Agar animasi sanggup berjalan pada banyak browser, jangan lupa selalu menyertakan prefix: -moz- untuk Firefox, -webkit- untuk Safari dan Chrome, dan -o- untuk Opera – baik pada @keyframes rule dan properti animation.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
Download Source Code Aplikasi
Membuat Animasi Di Css3 | Ahmad Code | 4.5