Cara menggunakan bounce animation css codepen

Apakah Anda tahu bahwa transformasi geometris ditambahkan ke elemen HTML dengan

5Properti CSS seperti skala, miring, dan putar dapat dianimasikan? Mereka dapat dianimasikan menggunakan

6 properti dan

7 animasi, tetapi yang lebih keren lagi adalah bahwa transformasi animasi dapat ditingkatkan sedikit demi sedikit dengan tambahan sedikit efek bouncing, menggunakan

8 fungsi waktu.

Pendeknya,

8 (dalam CSS) adalah a fungsi pengaturan waktu untuk transisi. Ini menentukan kecepatan transisi, dan di antara hal-hal lain, dapat juga digunakan untuk itu buat efek memantul dalam animasi.

Dalam postingan ini, pertama kita akan buat animasi transformasi sederhana untuk yang kita nanti tambah sebuah

8 fungsi waktu. Di akhir tutorial ini, Anda akan mengerti cara membuat animasi yang digunakan baik efek fan-out dan bouncing. Inilah hasil akhirnya (klik untuk melihat efeknya).

Lihat rotasi kipas Pen CSS dengan bouncing oleh Preethi (@rpsthecoder) di CodePen.

Demo ini terinspirasi oleh tembakan Dribbble yang indah oleh Christopher Jones tentang penanda lokasi animasi.

GAMBAR: Dribble

1. Membuat daun

Bentuk penanda lokasi terdiri dari lima daun (sebut saja). Untuk membuat Bentuk oval daun, mari kita gunakan

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

1 Properti CSS. Itu

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

1 satu sudut adalah terdiri dari dua jari-jari, horisontal dan vertikal, seperti yang ditunjukkan di bawah ini.

GAMBAR: W3C

Itu

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

1 properti memiliki banyak sintaks yang berbeda. Kami akan menggunakan yang lebih rumit untuk bentuk marker:

 batas-jari-jari: htl htr hbr hbl / vtl vtr vbr vbl;

Dalam sintaksis ini, jari-jari horisontal dan vertikal dikelompokkan bersama;

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

4 &

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

5 mewakili jari - jari horisontal & vertikal, dan

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

8 &

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

9 mewakili sudut atas, kiri, bawah & kanan. Contohnya,

0 singkatan jari-jari vertikal dari sudut kiri bawah.

Jika kamu memberi hanya satu nilai baik untuk sisi horizontal atau vertikal, nilai itu akan disalin ke semua jari-jari horizontal atau vertikal lainnya oleh browser.

Untuk buat bentuk oval vertikal, pertahankan radius horisontal

1 untuk semua sudut, dan sesuaikan yang vertikal, sampai bentuk yang diinginkan terlihat. Itu sisi horisontal hanya akan menggunakan satu nilai:

Itu jari-jari vertikal sudut kiri atas dan kanan atas akan

3, sedangkan sudut kiri bawah dan kanan bawah akan menggunakan

4 nilai.

HTML

CSS

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

GAMBAR: Bentuk marker (oval vertikal)

2. Mengalikan daun

Karena marker akan menyebar menampilkan lima daun, kami membuat empat lembar lagi daun dalam warna yang berbeda, dan dengan posisi absolut untuk menumpuknya satu sama lain.

HTML

CSS

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

3. Menangkap Klik Acara & Meningkatkan Estetika

Ayo tambahkan kotak centang dengan

5 pengidentifikasi untuk menangkap acara klik. Ketika kotak centang dicentang, daun akan mengering (berputar). Kami juga perlu menambahkan lingkaran putih dengan

6 pengidentifikasi untuk estetika. Ini akan diposisikan di atas marker, dan itu akan menjadi bagian tengah marker lokasi.

HTML

Kami menempatkan kotak centang sebelumnya, dan lingkaran putih sesudahnya, daunnya:

CSS

Pertama, kami menetapkan gaya dasar untuk kotak centang dan lingkaran penutup:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

Karena setiap daun akan berputar di sepanjang sumbu z dalam sudut yang berbeda, kita perlu mengatur

7 properti sesuai, untuk buat bentuk bintang. Kami juga menerapkan

6 milik untuk efek rotasi (lebih tepatnya kita menggunakan

9 aturan untuk daun).

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transisi: transform 1s linear;  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: tipe-n (1) transform: rotatez (325deg);

Jika Anda melihat CSS di atas, Anda dapat melihat dari kehadiran

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

0 pemilih saudara umum bahwa kita hanya menambahkan

6 dan

5 properti ketika kotak centang dicentang (ketika pengguna mengklik penanda).

4. Memodifikasi Pusat Rotasi

Secara default, pusat rotasi diposisikan di tengah elemen yang diputar, dalam kasus kami, di tengah daun. Kita perlu memindahkan pusat transformasi ke bagian dalam daun. Kita dapat melakukan ini dengan menggunakan

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

3 Properti CSS itu mengubah posisi elemen yang diubah.

Untuk membuat efek rotasi berfungsi dengan baik, mari kita tambahkan dua aturan berikut ke

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

4 pemilih di file CSS kami:

 .pinStarLeaf transform-origin: 30px 30px; transisi: mengubah 1s linier;

Mari kita lihat animasi penggemar kami sedang beraksi - pada saat ini, tanpa efek pantulan. Klik pada lingkaran putih, di atas marker.

Lihat rotasi kipas Pen out CSS oleh Preethi (@rpsthecoder) di CodePen.

Memahami Cara Kerja ubic-Bezier ()

Sekarang, untuk menambahkan efek pentalan, kita perlu mengganti

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

5 fungsi waktu dengan

8 dalam

6 deklarasi dalam file CSS kami.

Tapi pertama-tama, mari kita pahami logika di balik

8 fungsi waktu sehingga Anda dapat dengan mudah memahami efek pentalan.

Sintaks untuk

8 fungsi adalah sebagai berikut,

0 dan

.pinStarLeaf width: 60px; tinggi: 120px; border-radius: 50% / 30% 30% 70% 70%; warna latar: # B8F0F5;

6 adalah jarak dan waktu, dan nilainya biasanya berkisar antara 0 dan 1:

kubik-bezier (t1, d1, t2, d2)

Meskipun menjelaskan CSS

8 dalam hal jarak dan waktu tidak akurat, jauh lebih mudah untuk memahaminya dengan cara ini.

Asumsikan ada sebuah kotak yang bergerak dari titik A ke B dalam 6 detik. Mari kita gunakan yang berikut ini

8 fungsi waktu untuk transisi dengan

4 dan

5 nilai-nilai.

Dalam hampir tidak ada waktu, kotak bergerak dari A ke titik tengah, dan mengambil sisa waktu mencapai B.

Lihat Pen cubic-bezier (0,1,0,0) oleh Preethi (@rpsthecoder) di CodePen.

Mari kita coba transisi yang sama dengan nilai

6 dan

Selama tiga detik pertama, kotak itu tidak banyak bergerak, dan kemudian hampir melompat ke titik tengah, dan mulai bergerak dengan mantap ke arah B.

Lihat Pen cubic-bezier (0,1,0,0) oleh Preethi (@rpsthecoder) di CodePen.

Seperti yang terlihat,

8 mengontrol jarak antara A & titik tengah, dan

9 itu waktu yang dibutuhkan untuk mencapai titik tengah dari A.

Mari kita gunakan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

0 dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

1 sekarang. Kedua

9 dan

8 akan menjadi 1, dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

4 dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

Kotak bergerak hampir setengah dalam 3 detik (karena

5), dan dalam waktu singkat ia melompat ke titik B.

Lihat Pen cubic-bezier (0,1,0,0) oleh Preethi (@rpsthecoder) di CodePen.

Contoh terakhir menukar nilai sebelumnya dari

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

1 dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

Kotak bergerak hampir setengah dalam 3 detik (karena

5), maka selama 3 detik lagi tidak banyak bergerak sebelum melompat ke titik B.

Lihat Pen cubic-bezier (0,1,0,0) oleh Preethi (@rpsthecoder) di CodePen.

Contoh-contoh ini menunjukkan hal itu

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

0 dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

1 kontrol jarak dan waktu yang dibutuhkan kotak pergi dari titik tengah ke titik B.

Meskipun Anda mungkin tidak membutuhkan penjelasan panjang (belum jarang) ini

8 pada titik ini, saya pikir ini akan membantu Anda memahami fungsi ini dengan lebih baik. Sekarang, di mana bouncing datang dalam semua ini?

5. Menambahkan Efek Bouncing dengan Cubic-Bezier ()

Itu parameter kunci untuk efek pantulan adalah jarak,

8 dan

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

0. SEBUAH

8 Nilai dari kurang dari 1 mengambil kotak itu di belakang titik A sebelum melanjutkan ke B pada awal animasi.

SEBUAH

 #pinStarCenter, #pinStarCenterChkBox width: 45px; tinggi: 50px; posisi: absolut; kiri: 0; kanan: 0; atas: -60px; bawah: 0; margin: otomatis; warna latar: #fff; batas-jari-jari: 50%; kursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; tinggi: 100%; kursor: pointer;

0 Nilai dari lebih dari 1 mengambil kotak itu melampaui titik B sebelum kembali untuk beristirahat di B di akhir animasi. Karenanya efek bolak-balik memantul.

Sekarang saya akan menambahkan

8 nilai langsung ke demo kami di tempat yang sebelumnya

#pinStarWrapper width: 300px; tinggi: 300px; posisi: relatif;  .pinStarLeaf width: 60px; tinggi: 120px; posisi: absolut; border-radius: 50% / 30% 30% 70% 70%; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: otomatis; opacity: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;

5 nilai dari

6 properti, dan biarkan Anda melihat hasilnya.

Inilah hasil akhir, animasi fan-out khusus CSS dengan efek pentalan:

Lihat rotasi kipas Pen CSS dengan bouncing oleh Preethi (@rpsthecoder) di CodePen.

Untuk perbandingan dan memahami efek pentalan yang lebih baik, berikut adalah caranya

8 nilai animasi berperilaku ketika diterapkan pada kotak contoh kami: