Mainkan animasi di klik css

Jauh lebih mudah untuk menulis kode animasi di CSS daripada di jquery. Tetapi batasan dengan CSS adalah tidak interaktif. Itu tidak dapat dipanggil dengan klik tombol seperti yang dilakukan dengan jquery. Tapi ada trik memadukan Javascript dengan CSS dan mengaktifkan fungsi animasi CSS dengan fungsi javascript onclick

Di sini kita akan mencoba memindahkan gambar secara horizontal ke jarak jauh dengan mengklik tombol. Ini bukan kode yang rumit. Jangan ragu untuk menyalin dan menempelkan kode berikut. Ini dia

Table of Contents Show

Pos terkait
Menyiapkan Situs Web pertama Anda
Lindungi Browser Anda dengan Kata Sandi (Chrome & Firefox)
Dapatkan fitur Waktu Layar seperti iOS di Mac
Add-on/ekstensi keamanan untuk browser favorit Anda (Firefox/Chrome)
Bagaimana Anda menganimasikan CSS saat klik?
Bagaimana Anda memainkan animasi di CSS?
Apa animasi
Bagaimana cara mengontrol animasi CSS menggunakan JavaScript?

Pertama stylesheet

Lanjutkan membaca di bawah ini

.classname { width:320px; height:200px; background:red; animation:anyname 2s; -moz-animation:anyname 2s; /* Firefox */ -webkit-animation:anyname 2s; /* Safari and Chrome */ animation-direction:alternate; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-timing-function:linear; -moz-animation-timing-function:linear; /* Firefox */ -webkit-animation-timing-function:linear; /* Safari and Chrome */ } @keyframes anyname { from {margin-left:0px;} to {margin-left:600px;} } @-moz-keyframes anyname /* Firefox */ { from {margin-left:0px;} to {margin-left:600px;} } @-webkit-keyframes anyname /* Safari and Chrome */ { from {margin-left:0px;} to {margin-left:600px;} }

Javascript

function ani(){ document.getElementById('something').className ='classname'; }_

Akhirnya HTML

bagaimana cara kerjanya

Markup HTML gambar, dan klik tombol yang menjalankan fungsi ani() yang didefinisikan dalam Script yang ditulis di atas di dalam head. Dalam fungsi ani() diinstruksikan untuk mendapatkan elemen dengan id=”something”. Di bagian HTML ada pembagian dengan id itu sehingga dipanggil oleh skrip. Sekarang kode memasukkan kelas yang disebut classname ke dalam divisi yang didefinisikan di atas dalam CSS dengan semua informasi tentang animasi. Jadi segera setelah tombol diklik, fungsi ani() dipanggil dan memanggil kelas dengan properti animasi ke dalam divisi di mana id=”something”

Pos terkait

Rumah
Tidak dikategorikan
Menyiapkan Situs Web pertama Anda

Menyiapkan Situs Web pertama Anda

#Pengembangan Web / Oleh WebDev / 9 Oktober / 4 min read

Kami sebelumnya telah berbicara tentang situs web, beberapa jenisnya, serta Sistem Manajemen Konten. Jika Anda telah mengikuti kami dari awal, sekarang Anda pasti…

Menyiapkan Situs Web pertama Anda Baca Selengkapnya…

Rumah
Tidak dikategorikan
Menyiapkan Situs Web pertama Anda

Lindungi Browser Anda dengan Kata Sandi (Chrome & Firefox)

#Chrome #featured #Tips Umum #Keamanan / Oleh TechieDip / January 24, 2014 / 7 min read

Jika Anda adalah pengguna internet biasa yang sebagian besar mengakses web dari rumah, Anda pasti memiliki banyak kata sandi yang disimpan di browser Anda untuk akses cepat ke …

Lindungi Browser Anda dengan Kata Sandi (Chrome & Firefox) Baca Lebih Lanjut…

Rumah
Tidak dikategorikan
Menyiapkan Situs Web pertama Anda

Dapatkan fitur Waktu Layar seperti iOS di Mac

#Apps #macOS #Productivity / Oleh TechieDip / January 30, 2019 / 6 min read

Dengan iOS 12, Apple memperkenalkan fitur pelacakan waktu asli untuk perangkat iOS Anda, yang dikenal sebagai Waktu Layar. Waktu Layar memberi Anda statistik penggunaan terperinci dari perangkat iOS Anda dan memberikan ...

Dapatkan fitur Waktu Layar seperti iOS di Mac Baca Selengkapnya…

Rumah
Tidak dikategorikan
Menyiapkan Situs Web pertama Anda

Add-on/ekstensi keamanan untuk browser favorit Anda (Firefox/Chrome)

#Add-ons #Chrome #Extensions #featured #Firefox / Oleh TechieDip / March 22, 2012 / 5 min read

Pernah mempertimbangkan bagaimana Anda dapat membuat sesi penjelajahan internet Anda aman dengan beberapa add-on dan tweak keren di browser Anda?

Bagaimana Anda menganimasikan CSS saat klik?

Cara - Menganimasi Tombol .

Tambahkan efek "ditekan" pada klik. Klik. Cobalah sendiri "

Tambahkan panah saat melayang. Arahkan. Cobalah sendiri "

Tambahkan efek "riak" pada klik. Klik. Cobalah sendiri "

Bagaimana Anda memainkan animasi di CSS?

Kunci untuk memulai ulang animasi CSS adalah menyetel nama animasi dari animasi ke 'none' lalu menyetelnya kembali ke animasi asli. As you can see this requires two steps. One to switch it to a different animation and one to set it back.