search

Cara menggunakan slide in animation css

1 years ago
Komentar: 0
Dibaca: 134

Saat ini, semakin banyak website yang menggunakan animasi, baik dalam bentuk GIF, SVG, WebGL, video latar dan lain sebagainya. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktifitas, menambahkan lapisan tambahan untuk meningkatkan pengalaman pengguna website.

Show

Pada tutorial ini, saya akan memperkenalkan anda kepada animasi CSS; sebuah cara untuk menambahkan animasi dengan performa terbaik yang menjadi semakin populer seiring dengan yang meningkat. Selesai dengan pembahasan dasar, kita akan membuat contoh kecil dengan membuat animasi dengan mengubah sebuah kotak menjadi sebuah lingkaran:

Pengenalan @keyframes dan Animasi

Komponen utama dari animasi CSS adalah 

  0% {
67, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan 
  0% {
67 sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam 
  0% {
67, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.

Selanjutnya, agar animasi berjalan, anda perlu mengaitkan 

  0% {
67 tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam 
  0% {
67 dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.

@keyframes

Di sini kita akan mengatur tahapan animasi. Properti-properti di dalam 

  0% {
67 kita adalah:

  • Nama animasi (tutsFade dalam contoh ini).
  • Tahapan: 0%-100%; dari (sama dengan 0%) dan hingga (sama dengan 100%).
  • Style CSS: style yang anda ingin aplikasikan dalam setiap tahapannya.

Contoh:

1
@keyframes tutsFade {

2
  0% {

3
    opacity: 1;

4
  }

5
  100% {

@keyframes tutsFade {
0
@keyframes tutsFade {
1
@keyframes tutsFade {
2
  }

@keyframes tutsFade {
4
@keyframes tutsFade {
5

atau:

1
@keyframes tutsFade {

2
@keyframes tutsFade {
9
3
    opacity: 1;

4
  }

5
2
5
@keyframes tutsFade {
0
@keyframes tutsFade {
1
@keyframes tutsFade {
2
  }

@keyframes tutsFade {
4
@keyframes tutsFade {
5

atau dengan shorthand:

1
@keyframes tutsFade {

2
2
5
3
@keyframes tutsFade {
1
4
  }

5
@keyframes tutsFade {
5

Kode di atas akan menerapkan sebuah efek transisi terhadap opacity dari sebuah elemen, dari 

  0% {
73 menjadi 
  0% {
74. Masing-masing dari contoh di atas akan menghasilkan hasil akhir yang sama.

Animasi

Properti 

  0% {
75 digunakan untuk memanggil 
  0% {
67 ke dalam sebuah selector CSS. Animasi dapat memiliki beberapa properti sebagai berikut:

  •   0% {
    77: nama 
      0% {
    67 (ingat kita memilih tutsFade).
  •   0% {
    79: durasi animasi, total durasi dari animasi dari awal hingga akhir.
  •   0% {
    80: mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  •   0% {
    81: durasi tunda ebelum animasi kita mulai.
  •   0% {
    82: jumlah penambahan dalam animasi.
  •   0% {
    83: memberi anda kemampuan untuk mengubah arah loop, dari awal hingga akhir, atau dari akhir hingga awal, atau keduanya.
  •   0% {
    84: menentukan style yang akan di terapkan ke dalam elemen ketika animasi kita selesai ( none | forwards | backwards | both )

Contohnya:

1
3
3
2
3
5
3
3
7
4
3
9
5
    opacity: 1;
1
@keyframes tutsFade {
0
    opacity: 1;
3
@keyframes tutsFade {
2
    opacity: 1;
5
@keyframes tutsFade {
4
@keyframes tutsFade {
5

atau dengan menggunakan shorthand:

1
3
3
2
4
1
3
@keyframes tutsFade {
5

Kode di atas akan mencipatakan efek kedip, dengan waktu tunda 1 detik, 4 detik total durasi animasi, dengan arah berbalik dan putaran loop tanpa batas.

Menambahkan Awalan Vendor

Selama masih menjadi working draft, kita butuh menambahakan properti 

  0% {
85 dengan awalan khusus untuk memastikan dukungan terbaik browser. Standard awalan ini adalah:

  • Chrome & Safari: 
      0% {
    86
  • Firefox: 
      0% {
    87
  • Opera: 
      0% {
    88
  • Internet Explorer: 
      0% {
    89

Sebuah properti 

  0% {
85 dengan menggunakan awalan akan nampak seperit berikut:

1
3
3
2
4
7
3
4
9
4
  }
1
5
  }
3
@keyframes tutsFade {
0
  }
5
@keyframes tutsFade {
2
@keyframes tutsFade {
5

begitu pula dengan 

  0% {
67:

1
  }
9
2
5
1
3
5
3
4
5
5
5
5
7

Agar mudah terbaca, saya akan melanjutkan tutorial ini dengan tanpa menggunakan awalan, namun versi akhir akan menyertakan awalan khusus untuk semua browser dan saya juga mendorong anda untuk menggunakan awalan pada kode CSS anda.

Untuk mengetahui lebih lanjut tentang awalan vendor, anda dapat melihat http://css3please.com/.

Menambahkan Banyak Animasi

Anda dapat menambahkan banyak animasi ke dalam satu elemen dengan menggunakan tanda koma sebagai tanda pemisah. Katakan kita ingin menambahkan rotasi pada elemen 

  0% {
92, kita dapat melakukannya dengan membuat 
  0% {
67 tambahan dan kemudian mengaitkannya ke dalam element kita, seperti ini:

1
3
3
2
  100% {
1
3
  100% {
3
4
@keyframes tutsFade {
5
5
@keyframes tutsFade {

@keyframes tutsFade {
0
2
5
@keyframes tutsFade {
2
@keyframes tutsFade {
1
@keyframes tutsFade {
4
  }

@keyframes tutsFade {
04
@keyframes tutsFade {
5
@keyframes tutsFade {
06
@keyframes tutsFade {
07
@keyframes tutsFade {
08
2
5
@keyframes tutsFade {
10
@keyframes tutsFade {
11
@keyframes tutsFade {
12
  }

@keyframes tutsFade {
14
@keyframes tutsFade {
5

Tutorial Mengubah Kotak manjadi Lingkaran

Sekarang, mari kita membuat contoh bentuk animasi sederhana; dengan mengubah kotak menjadi lingkaran dengan menggunakan prinsip yang telah kita bahas di atas. Kita akan memiliki total lima tahapan dan untuk masing-masing tahapan kita akan mendefinisikan sebuah border-radius, sebuah rotasi dan sebuah latar warna berbeda untuk elemen kita.

Elemen Dasar

Pertama, mari kita susunan markup-nya, yaitu elemen yang akan kita animasikan. Kita tidak akan menambahkan kelas, kita hanya akan menggunakan sebuah div:

1
@keyframes tutsFade {
17

Kemudian, dengan menggunakan sebauh selector (

  0% {
94), tambahkan styling dasar untuk div tersebut:

1
@keyframes tutsFade {
19
2
@keyframes tutsFade {
21
3
@keyframes tutsFade {
23
4
@keyframes tutsFade {
25
5
@keyframes tutsFade {
5

Membuat Keyframes

Sekarang mari kita siapkan 

  0% {
67, yang akan kita beri nama 
  0% {
96, berserta lima tahapannya.

1
@keyframes tutsFade {
29
2
@keyframes tutsFade {
31
3
@keyframes tutsFade {
33
4
@keyframes tutsFade {
35
5
@keyframes tutsFade {
37
@keyframes tutsFade {
0
@keyframes tutsFade {
39
@keyframes tutsFade {
2
@keyframes tutsFade {
5

Kita perlu menentukan styles untuk masing-masing tahapan di atas, jadi mari kita mulai dengan menentukan besaran 

  0% {
97 untuk masing ujung kotak.

1
@keyframes tutsFade {
43
2
@keyframes tutsFade {
45
3
@keyframes tutsFade {
47
4
  }

5
@keyframes tutsFade {
51
@keyframes tutsFade {
0
@keyframes tutsFade {
53
@keyframes tutsFade {
2
  }

@keyframes tutsFade {
4
@keyframes tutsFade {
57
@keyframes tutsFade {
04
@keyframes tutsFade {
59
@keyframes tutsFade {
06
  }

@keyframes tutsFade {
08
@keyframes tutsFade {
63
@keyframes tutsFade {
10
@keyframes tutsFade {
65
@keyframes tutsFade {
12
  }

@keyframes tutsFade {
14
  100% {

@keyframes tutsFade {
70
@keyframes tutsFade {
71
@keyframes tutsFade {
72
  }

@keyframes tutsFade {
74
@keyframes tutsFade {
5

Sebagai tambahan, kita akan memberikan sebuah 

  0% {
98 berbeda di masing-masing tahapan.

1
@keyframes tutsFade {
29
2
@keyframes tutsFade {
45
3
@keyframes tutsFade {
47
4
@keyframes tutsFade {
83
5
  }

@keyframes tutsFade {
0
@keyframes tutsFade {
51
@keyframes tutsFade {
2
@keyframes tutsFade {
53
@keyframes tutsFade {
4
@keyframes tutsFade {
91
@keyframes tutsFade {
04
  }

@keyframes tutsFade {
06
@keyframes tutsFade {
57
@keyframes tutsFade {
08
@keyframes tutsFade {
59
@keyframes tutsFade {
10
@keyframes tutsFade {
99
@keyframes tutsFade {
12
  }

@keyframes tutsFade {
14
2
03
@keyframes tutsFade {
70
@keyframes tutsFade {
65
@keyframes tutsFade {
72
2
07
@keyframes tutsFade {
74
  }

2
10
2
11
2
12
@keyframes tutsFade {
71
2
14
2
15
2
16
  }

2
18
@keyframes tutsFade {
5

Untuk membuatnya lebih menarik, selain 

  0% {
97 dan 
  0% {
98, kita juga akan merotasi div.

1
@keyframes tutsFade {
29
2
@keyframes tutsFade {
45
3
@keyframes tutsFade {
47
4
2
27
5
2
29
@keyframes tutsFade {
0
  }

@keyframes tutsFade {
2
@keyframes tutsFade {
51
@keyframes tutsFade {
4
@keyframes tutsFade {
53
@keyframes tutsFade {
04
2
15
@keyframes tutsFade {
06
2
39
@keyframes tutsFade {
08
  }

@keyframes tutsFade {
10
@keyframes tutsFade {
57
@keyframes tutsFade {
12
@keyframes tutsFade {
59
@keyframes tutsFade {
14
@keyframes tutsFade {
99
@keyframes tutsFade {
70
2
49
@keyframes tutsFade {
72
  }

@keyframes tutsFade {
74
2
03
2
10
@keyframes tutsFade {
65
2
12
2
07
2
14
2
59
2
16
  }

2
18
2
11
2
64
@keyframes tutsFade {
71
2
66
2
15
2
68
2
69
2
70
  }

2
72
@keyframes tutsFade {
5

Menerapkan Animasi

Setalah kita mendefinisikan animasi square-to-circle, kita akan menerapkannya ke dalam div:

1
@keyframes tutsFade {
19
2
@keyframes tutsFade {
21
3
@keyframes tutsFade {
23
4
2
81
5
2
83
@keyframes tutsFade {
0
@keyframes tutsFade {
5

Di sini anda melihat kita telah menambahkan porperti 

  0% {
85 shorthand, yang menyatakan:

  • animation-name adalah 
      0% {
    96.
  • animation-duration adalah 
    3
    03.
  • animation-delay adalah 
    3
    04.
  • animation-iteration-count adalah 
    3
    05, jadi animasinya akan berjalan seterusnya tanpa batas.
  • Dan animation-direction adalah 
    3
    06, jadi animasinya akan berjalan dari awal hingga akhir, kemudian kembali ke awal lagi, dan lagi hingga akhir, dan seterusnya.

Menggunakan Timing-Function

Satu nilai terakhir yang dapat kita tambahkan pada properti 

  0% {
85 adalah 
  0% {
80. Ini akan menentukan kecepatan, percepatan, dan perlambatan dari pergerakan animasi kita. Fungsi ini dapat memiliki nilai yang sangat detail, yang akan cukup sulit untuk dihitung secara manual, namun ada banyak website gratis yang menyediakan layanan untuk menghitung fungsi waktu animasi ini.

Salah satu alat tersebut adalah CSS Easing Animation Tool, jdai kita akan menggunakannya untuk menentukan nilai dari fungsi waktu.

I would like to add an elastic effect to our 

  0% {
96 animation, using a cubic-bezier function.

Saya ingin menambahkan sebuah efek elastis untuk animasi 

  0% {
96 kita, dengan menggunakan nilai cubic-bezier.

Cara menggunakan slide in animation css
Cara menggunakan slide in animation css
Cara menggunakan slide in animation css

Setelah bermain dengan alat ini dan menghasilkan beberapa macam kurva bezier, perbarui nilai dari timing-function dengan seperti yang terlihat pada kode di bawah ini.

1
@keyframes tutsFade {
19
2
@keyframes tutsFade {
21
3
@keyframes tutsFade {
23
4
2
81
5
2
95
@keyframes tutsFade {
0
@keyframes tutsFade {
5

Kode akhir, tanpa tambahan awalan vendor ( 

  0% {
86 , 
  0% {
87, 
  0% {
89, 
  0% {
88 ) adalah sebagai berikut:

1
@keyframes tutsFade {
19
2
@keyframes tutsFade {
21
3
@keyframes tutsFade {
23
4
2
81
5
  0% {
07
@keyframes tutsFade {
0
@keyframes tutsFade {
5
@keyframes tutsFade {
2
@keyframes tutsFade {
4
@keyframes tutsFade {
29
@keyframes tutsFade {
04
@keyframes tutsFade {
45
@keyframes tutsFade {
06
@keyframes tutsFade {
47
@keyframes tutsFade {
08
2
27
@keyframes tutsFade {
10
2
29
@keyframes tutsFade {
12
  }

@keyframes tutsFade {
14
@keyframes tutsFade {
51
@keyframes tutsFade {
70
@keyframes tutsFade {
53
@keyframes tutsFade {
72
2
15
@keyframes tutsFade {
74
2
39
2
10
  }

2
12
@keyframes tutsFade {
57
2
14
@keyframes tutsFade {
59
2
16
@keyframes tutsFade {
99
2
18
2
49
2
64
  }

2
66
2
03
2
68
@keyframes tutsFade {
65
2
70
2
07
2
72
2
59
  0% {
51
  }

  0% {
53
2
11
  0% {
55
@keyframes tutsFade {
71
  0% {
57
2
15
  0% {
59
2
69
  0% {
61
  }

  0% {
63
@keyframes tutsFade {
5

Satu Hal Terakhir

Semuanya berjalan dengan baik di browser terkini, tapi Firefox mempunya kebiasaan yang buruk dalam menampilkan transformasi obyek. Lihatlah garis-garis yang bergerigi berikut untuk melihat apa yang saya maksud.

Cara menggunakan slide in animation css
Cara menggunakan slide in animation css
Cara menggunakan slide in animation css

Untungnya, ada cara untuk menyelesaikan masalah ini. Yaitu dengan mengubah outline pada div tersebut menjadi transparan seperti di bawah ini dan Firefox akan menampilkannya dengan sempurna!

1
  0% {
66

Simpulan

Kita telah menggunakan animasi CSS untuk membuat sebuah contoh sederhana, animasi berulang.

Dukungan Browser

Sebagai informasi terkini dukungan browser untuk animasi CSS, silakan lihat tapi secara singkat, browser yang telah mendukungan animasi termasuk: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

kode css

Pos Terkait

Penanganan file dalam python pynative
Penanganan file dalam python pynative

Cara menggunakan openapi-python-client: command not found
Cara menggunakan openapi-python-client: command not found

Cara menggunakan mengapa python banyak digunakan?
Cara menggunakan mengapa python banyak digunakan?

Cara mengubah warna tulisan di tabel html
Cara mengubah warna tulisan di tabel html

Cara menggunakan hide warning wordpress plugin
Cara menggunakan hide warning wordpress plugin

Cara menggabungkan file excel menjadi satu menggunakan file batch
Cara menggabungkan file excel menjadi satu menggunakan file batch

Bisakah kita membuat diagram er di mysql?
Bisakah kita membuat diagram er di mysql?

Tab bawah google sheets tidak muncul
Tab bawah google sheets tidak muncul

Wajah menggunakan javascript queryselectorall child
Wajah menggunakan javascript queryselectorall child

Cara menggunakan transpose excel formula
Cara menggunakan transpose excel formula

Periklanan

BERITA TERKINI

Bisakah Anda mengaktifkan javascript di ponsel?
1 years ago . by AdorableMantra
Bagaimana Anda menghapus teks duplikat dengan python?
1 years ago . by DecreasingEmperor
Cara menghapus latar belakang video di CapCut
1 years ago . by SkepticalDugout
Apa itu rounddown dalam excel?
1 years ago . by JollyDollar
Dapatkan array multidimensi kunci php
1 years ago . by LuridRecognition
Cara mengeluarkan darah haid yang tidak keluar
1 years ago . by CuriousRedundancy
Dapatkan javascript bulan dengan 0
1 years ago . by NastyMedics
Python cetak daftar daftar secara vertikal
1 years ago . by DeviantColors
Cara membersihkan kacamata yang tergores
1 years ago . by Two-storyDealing
Cara menggunakan variable to dataframe python
1 years ago . by ThrobbingMetaphysics

Toplist Popular

#1
Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
1 years ago
#2
Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
1 years ago
#3
Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
1 years ago
#4
Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
1 years ago
#5
Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
1 years ago
#6
Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
1 years ago
#7
Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
1 years ago
#8
Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
1 years ago
#9
Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
1 years ago
#10
Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeenfritzhtrjako
Copyright © 2024 idkuu.com Inc.