Geser ke atas dan ke bawah animasi css

Question

Atas
Dasar
Kiri
Benar
Memudar
Perbesar
Putaran

Nội dung chính Show

W3. Kelas Animasi CSS
Animate Top
Animasikan Bawah
Animasikan Kiri
Animasi Kanan
Memudar di Elemen
Perbesar Elemen
Elemen Putar
Memudar Tak Terbatas
Animasi Fade In dan Out
Pudar Semua
Bagaimana Anda menganimasikan ke atas dan ke bawah dalam CSS?
Bagaimana Anda meluncur ke atas di CSS?
Bagaimana Anda membuat animasi melompat di CSS?
Bagaimana Anda menganimasikan CSS dengan scroll?

W3. Kelas Animasi CSS

W3. CSS menyediakan kelas berikut untuk animasi

ClassDefinesw3-animate-topSlides dalam elemen dari atas (-300px ke 0)w3-animate-bottomSlides dalam elemen dari bawah (-300px ke 0)w3-animate-leftSlides dalam elemen dari kiri (-300px ke 0) . 8 detikw3-animate-zoomMenganimasi elemen dari 0 hingga 100% dalam ukuranw3-animate-fadingMenganimasi opacity elemen dari 0 hingga 1 dan 1 ke 0 (fades in + fade out)w3-spinMemutar elemen 360 derajat

Animate Top

Slide kelas w3-animate-top dalam elemen dari atas (dari -300px ke 0)

Contoh

Animasi itu Menyenangkan

Cobalah sendiri "

Animasikan Bawah

Kelas w3-animate-bottom meluncur dalam elemen dari bawah (dari -300px ke 0)

Contoh

Animasi itu Menyenangkan

Cobalah sendiri "

Animasikan Kiri

Kelas w3-animate-left meluncur dalam elemen dari kiri (-300px ke 0)

Contoh

Animasi itu Menyenangkan

Cobalah sendiri "

Animasi Kanan

Kelas w3-animate-right meluncur dalam elemen dari kanan (-300px ke 0)

Contoh

Animasi itu Menyenangkan

Cobalah sendiri "

Memudar di Elemen

Kelas w3-animate-opacity menganimasikan opacity elemen dari 0 menjadi 1 dalam 0. 8 detik

Fade dalam elemen dengan kelas w3-animate-opacity

Perbesar Elemen

Kelas w3-animate-zoom menganimasikan elemen dari ukuran 0 hingga 100%.

Perbesar elemen dengan kelas w3-animate-zoom

Elemen Putar

Kelas w3-spin memutar elemen 360 derajat

Memudar Tak Terbatas

Kelas w3-animate-fading memudar masuk dan keluar elemen setiap 10 detik (terus menerus)

Animasi Fade In dan Out

Pudar Semua

Contoh

Cobalah sendiri "

Animasi CSS memungkinkan untuk menganimasikan transisi dari satu konfigurasi gaya CSS ke konfigurasi lainnya. Animasi terdiri dari dua komponen, gaya yang menjelaskan animasi CSS dan sekumpulan keyframe yang menunjukkan status awal dan akhir gaya animasi, serta kemungkinan titik arah perantara

Ada tiga keunggulan utama animasi CSS dibandingkan teknik animasi berbasis skrip tradisional

Mereka mudah digunakan untuk animasi sederhana;
Animasi berjalan dengan baik, bahkan di bawah beban sistem sedang. Animasi sederhana sering kali berkinerja buruk di JavaScript. Mesin rendering dapat menggunakan frame-skipping dan teknik lain untuk menjaga performa semulus mungkin
Membiarkan browser mengontrol urutan animasi memungkinkan browser mengoptimalkan kinerja dan efisiensi, misalnya dengan mengurangi frekuensi pembaruan animasi yang berjalan di tab yang saat ini tidak terlihat

Untuk membuat rangkaian animasi CSS, Anda memberi gaya pada elemen yang ingin Anda animasikan dengan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 atau sub-propertinya. Ini memungkinkan Anda mengonfigurasi pengaturan waktu, durasi, dan detail lain tentang bagaimana urutan animasi akan berkembang. Ini tidak mengonfigurasi tampilan sebenarnya dari animasi, yang dilakukan menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 seperti yang dijelaskan pada bagian di bawah ini

Sub-properti dari

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 properti adalah

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_3

Menentukan penundaan antara pemuatan elemen dan dimulainya rangkaian animasi dan apakah animasi harus dimulai segera dari awal atau sebagian dari animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_4

Menentukan apakah iterasi pertama animasi harus maju atau mundur dan apakah iterasi berikutnya harus berganti arah pada setiap proses melalui urutan atau reset ke titik awal dan ulangi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5

Menentukan lamanya waktu di mana animasi menyelesaikan satu siklus

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_6

Menentukan cara animasi menerapkan gaya ke targetnya sebelum dan sesudah dijalankan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_7

Menentukan berapa kali animasi harus diulang

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_8

Menentukan nama aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_1 yang menjelaskan keyframe animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_0

Menentukan apakah akan menjeda atau memutar urutan animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_1

Menentukan bagaimana animasi bertransisi melalui keyframe dengan membuat kurva akselerasi

Setelah Anda mengonfigurasi pengaturan waktu animasi, Anda perlu menentukan tampilan animasi. Hal ini dilakukan dengan membuat satu atau lebih bingkai utama menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Setiap keyframe menjelaskan bagaimana elemen animasi harus dirender pada waktu tertentu selama urutan animasi

Karena pengaturan waktu animasi ditentukan dalam gaya CSS yang mengonfigurasi animasi, keyframe menggunakan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

3 untuk menunjukkan waktu selama urutan animasi berlangsung. 0% menunjukkan momen pertama urutan animasi, sedangkan 100% menunjukkan keadaan akhir animasi. Karena dua waktu ini sangat penting, mereka memiliki alias khusus.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4 dan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5. Keduanya opsional. Jika

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_4/

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

7 atau

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5/

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

9 tidak ditentukan, browser memulai atau menyelesaikan animasi menggunakan nilai yang dihitung dari semua atribut

Secara opsional, Anda dapat menyertakan bingkai kunci tambahan yang menjelaskan langkah-langkah perantara antara awal dan akhir animasi

Singkatan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 berguna untuk menghemat ruang. Sebagai contoh, beberapa aturan yang telah kami gunakan melalui artikel ini

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

dapat diganti dengan menggunakan steno

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0

p {
  animation: 3s infinite alternate slidein;
}

Untuk mempelajari lebih lanjut tentang urutan di mana nilai properti animasi yang berbeda dapat ditentukan menggunakan singkatan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0, lihat halaman referensi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0

Properti tulisan tangan animasi CSS dapat menerima banyak nilai, dipisahkan dengan koma. Fitur ini dapat digunakan ketika Anda ingin menerapkan banyak animasi dalam satu aturan dan mengatur durasi yang berbeda, jumlah iterasi, dll. , untuk setiap animasi. Mari kita lihat beberapa contoh cepat untuk menjelaskan permutasi yang berbeda

Dalam contoh pertama ini, ada tiga durasi dan tiga nilai hitungan iterasi. Jadi setiap animasi diberi nilai durasi dan jumlah iterasi dengan posisi yang sama dengan nama animasi. Animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_4 diberi durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5 dan hitungan iterasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

6, dan animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_7 diberi durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

8 dan hitungan iterasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

9

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Dalam contoh kedua ini, tiga nama animasi ditetapkan, tetapi hanya ada satu durasi dan hitungan iterasi. Dalam hal ini, ketiga animasi diberikan durasi dan jumlah iterasi yang sama

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

Dalam contoh ketiga ini, tiga animasi ditentukan, tetapi hanya dua durasi dan hitungan iterasi. Dalam kasus seperti di mana tidak ada cukup nilai dalam daftar untuk menetapkan satu terpisah untuk setiap animasi, siklus penetapan nilai dari item pertama hingga terakhir dalam daftar yang tersedia dan kemudian kembali ke item pertama. Jadi,

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_4 mendapatkan durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5, dan

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 mendapatkan durasi

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

3, yang merupakan nilai terakhir dalam daftar nilai durasi. Penetapan nilai durasi kini disetel ulang ke nilai pertama; . Nilai hitungan iterasi (dan nilai properti lainnya yang Anda tentukan) akan ditetapkan dengan cara yang sama

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Jika ketidakcocokan dalam jumlah animasi dan nilai properti animasi terbalik, misalkan ada lima nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5 untuk tiga nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

8, maka nilai properti animasi ekstra atau tidak terpakai, dalam hal ini, dua nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5, tidak berlaku untuk animasi apa pun

Catatan. Beberapa browser lama (sebelum 2017) mungkin memerlukan awalan;

Contoh sederhana ini memberi gaya pada elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

_0 sehingga teks meluncur masuk dari tepi kanan jendela browser

Perhatikan bahwa animasi seperti ini dapat menyebabkan halaman menjadi lebih lebar dari jendela browser. Untuk menghindari masalah ini, letakkan elemen yang akan dianimasikan dalam wadah, dan atur

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

2 pada wadah

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Dalam contoh ini, gaya untuk elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

_0 menetapkan bahwa animasi harus memakan waktu 3 detik untuk dieksekusi dari awal hingga akhir, menggunakan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5, dan bahwa nama aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 yang menentukan bingkai utama untuk urutan animasi diberi nama "slidein

Jika kami ingin gaya kustom apa pun pada elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

0 muncul di browser yang tidak mendukung animasi CSS, kami juga akan menyertakannya di sini;

Keyframe ditentukan menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Dalam hal ini, kami hanya memiliki dua bingkai utama. Yang pertama terjadi pada 0% (menggunakan alias

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4). Di sini, kami mengonfigurasi margin kiri elemen menjadi 100% (yaitu, di tepi paling kanan dari elemen yang memuatnya), dan lebar elemen menjadi 300% (atau tiga kali lebar elemen yang memuatnya). . Hal ini menyebabkan frame pertama animasi memiliki header yang ditarik dari tepi kanan jendela browser

Bingkai kunci kedua (dan terakhir) terjadi pada 100% (menggunakan alias

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5). Margin kiri diatur ke 0% dan lebar elemen diatur ke 100%. Ini menyebabkan tajuk menyelesaikan animasinya rata dengan tepi kiri area konten

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Catatan. Muat ulang halaman untuk melihat animasi

Mari tambahkan keyframe lain ke animasi contoh sebelumnya. Katakanlah kita ingin ukuran font header bertambah saat bergerak dari kanan ke kiri untuk sementara waktu, lalu mengecil kembali ke ukuran aslinya. Itu sesederhana menambahkan keyframe ini

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

Kode lengkap sekarang terlihat seperti ini

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Ini memberi tahu browser bahwa 75% dari urutan animasi, header harus memiliki margin kiri sebesar 25% dan lebarnya harus 150%

Catatan. Muat ulang halaman untuk melihat animasi

Untuk membuat animasi berulang, gunakan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

7 untuk menunjukkan berapa kali mengulang animasi. Dalam hal ini, mari kita gunakan

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_1 untuk mengulangi animasi tanpa batas

p {
  animation: 3s infinite alternate slidein;
}

0

Menambahkannya ke kode yang ada

p {
  animation: 3s infinite alternate slidein;
}

_1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Itu membuatnya berulang, tetapi sangat aneh jika ia melompat kembali ke awal setiap kali mulai dianimasikan. Yang benar-benar kami inginkan adalah untuk bergerak bolak-balik melintasi layar. Itu mudah dilakukan dengan mengatur

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

4 ke

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

3

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Dan kode lainnya

p {
  animation: 3s infinite alternate slidein;
}

_1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Anda bisa mendapatkan kontrol tambahan atas animasi — serta informasi berguna tentangnya — dengan memanfaatkan acara animasi. Peristiwa ini, diwakili oleh objek

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_4, dapat digunakan untuk mendeteksi kapan animasi dimulai, selesai, dan memulai iterasi baru. Setiap peristiwa mencakup waktu terjadinya serta nama animasi yang memicu peristiwa tersebut

Kami akan memodifikasi contoh teks geser untuk menampilkan beberapa informasi tentang setiap peristiwa animasi saat itu terjadi, sehingga kami dapat melihat cara kerjanya

Menambahkan CSS

Kita mulai dengan membuat CSS untuk animasinya. Animasi ini akan berlangsung selama 3 detik, disebut "slidein", ulangi 3 kali, dan berganti arah setiap kali. Di

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_1, lebar dan margin kiri dimanipulasi untuk membuat elemen meluncur melintasi layar

p {
  animation: 3s infinite alternate slidein;
}

_6

Menambahkan pendengar acara animasi

Kami akan menggunakan kode JavaScript untuk mendengarkan ketiga kemungkinan peristiwa animasi. Kode ini mengonfigurasi pendengar acara kami;

p {
  animation: 3s infinite alternate slidein;
}

_7

Ini adalah kode yang cukup standar; . Hal terakhir yang dilakukan kode ini adalah menyetel

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

7 pada elemen yang akan kita animasikan menjadi "slidein";

Mengapa? . Jadi kita akan memulai animasi sendiri dengan menyetel kelas elemen ke gaya yang dianimasikan setelah fakta

Menerima acara

Acara dikirim ke fungsi

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_9, yang ditunjukkan di bawah ini

p {
  animation: 3s infinite alternate slidein;
}

_8

Kode ini juga sangat sederhana. Ini melihat

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

_0 untuk menentukan jenis peristiwa animasi yang terjadi, lalu menambahkan catatan yang sesuai ke

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

1 (daftar tidak berurutan) yang kami gunakan untuk mencatat peristiwa ini

Outputnya, ketika semua dikatakan dan dilakukan, terlihat seperti ini

Dimulai. waktu berlalu adalah 0
Loop baru dimulai pada waktu 3. 01200008392334
Loop baru dimulai pada waktu 6. 00600004196167
Berakhir. waktu berlalu adalah 9. 234000205993652

Perhatikan bahwa waktunya sangat dekat, tetapi tidak persis, yang diharapkan mengingat waktu yang ditetapkan saat animasi dikonfigurasi. Perhatikan juga bahwa setelah iterasi terakhir animasi, peristiwa

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 tidak dikirim;

Demi kelengkapan, inilah HTML yang menampilkan konten halaman, termasuk daftar tempat skrip menyisipkan informasi tentang peristiwa yang diterima

Bagaimana Anda menganimasikan ke atas dan ke bawah dalam CSS?

img. vert-move { -webkit-animation. penggerak 1s alternatif tak terbatas; . penggerak 1s alternatif tak terbatas;.

img. vert-move { -webkit-animation. penggerak 1s alternatif tak terbatas;.

@-webkit-keyframes penggerak { 0% { transformasi. terjemahkanY(0); .

@keyframes penggerak { 0% { transformasi. terjemahkanY(0);

Bagaimana Anda meluncur ke atas di CSS?

tinggi-transisi-tersembunyi { max-height. 0; . .

Tambahkan dan konfigurasikan beberapa kelas CSS

Bungkus konten Anda ke dalam wadah pembungkus

Gunakan plugin jQuery untuk memicu operasi slide

Bagaimana Anda membuat animasi melompat di CSS?

CSS (Kurang) .

@keyframe melompat {

0% {transformasi. translate3d(0,0,0) scale3d(1,1,1);}

40% {transformasi. terjemahkan3d(0,30%,0) skala3d(. 7,1. 5,1);}

100% {berubah. translate3d(0,100%,0) scale3d(1. 5,. 7,1);}

melompat {

transform-origin. 50% 50%;

animasi. melompat. 5s linear bergantian tak terbatas;

Bagaimana Anda menganimasikan CSS dengan scroll?

Memicu animasi CSS pada scroll adalah jenis animasi yang dipicu scroll. .

Gunakan Intersection Observer API

Ukur offset elemen saat pengguna menggulir

Gunakan pustaka JavaScript pihak ketiga yang mengimplementasikan #1 atau #2

kode css

Geser ke atas dan ke bawah animasi css

W3. Kelas Animasi CSS

Animate Top

Contoh

Animasikan Bawah

Contoh

Animasikan Kiri

Contoh

Animasi Kanan

Contoh

Memudar di Elemen

Perbesar Elemen

Elemen Putar

Memudar Tak Terbatas

Animasi Fade In dan Out

Pudar Semua

Contoh

Menambahkan CSS

Menambahkan pendengar acara animasi

Menerima acara

Bagaimana Anda menganimasikan ke atas dan ke bawah dalam CSS?

Bagaimana Anda meluncur ke atas di CSS?

Bagaimana Anda membuat animasi melompat di CSS?

Bagaimana Anda menganimasikan CSS dengan scroll?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội