Slide animasi keyframe css ke atas

Salah satu hal yang dapat Anda lakukan dengan properti 'animasi' CSS adalah menampilkan rangkaian slide sebagai tayangan slide yang diputar secara otomatis, i. e. , ini memperlihatkan satu slide selama beberapa detik, lalu slide berikutnya selama beberapa detik, dll

Pada contoh di bawah, tayangan slide berulang tanpa batas. Setelah slide terakhir, slide pertama ditampilkan lagi. Tetapi menampilkan setiap slide hanya sekali sama mudahnya

Slide dalam contoh saya adalah elemen DIV dengan konten. Bersama-sama mereka terkandung dalam elemen DIV lain dengan atribut ID. Tidak perlu menggunakan elemen DIV. Hampir semua elemen lain bisa digunakan, selama setiap slide adalah satu elemen. Ini adalah set slide yang akan saya gunakan

  

    This is slide 1
    
Slide 1
    
It has a link.
  
  

    This is the second slide
    
Second slide
  
  

    This is slide number 3
    
Slide number 3
  

Anda dapat memberikan gaya pada setiap slide (untuk contoh ini saya hanya membuatnya hijau dan memberi mereka batas hijau). Meskipun bergantung pada metode yang digunakan untuk menganimasikan slide, mungkin ada beberapa batasan pada gaya apa yang dapat Anda gunakan

Di bawah ini adalah enam metode berbeda untuk membuat tayangan slide. Masing-masing menggunakan properti CSS yang berbeda untuk menyembunyikan dan menampilkan slide. Berikut adalah ikhtisar karakteristik utama dari masing-masing metode

Metode 1 – visibilitas

Satu pilihan yang jelas untuk sebuah properti untuk dianimasikan adalah 'visibilitas'. Anda menyetel visibilitas ke terlihat agar slide ditampilkan dan disembunyikan untuk yang lainnya. Untuk memastikan semua slide ditampilkan di tempat yang sama, Anda dapat menggunakan properti 'position'

Karena slide diposisikan dengan posisi absolut, jika Anda memiliki beberapa konten setelah slide, Anda perlu mengetahui berapa banyak ruang yang harus dipesan. Dalam hal ini, saya tahu bahwa slide terbesar tingginya hampir 10em, jadi saya mengatur wadah set slide ke 10em. Wadah juga membutuhkan 'posisi'. relatif', jadi saya bisa memposisikan slide relatif terhadapnya

#slideset1 {height: 10em; position: relative}

Setiap slide (mis. e. , setiap anak dari wadah set slide) awalnya tidak terlihat dan diposisikan di sudut kiri atas wadah. Setiap slide memiliki referensi ke animasi yang disebut 'autoplay1', yang akan saya definisikan di bawah. Saya juga menyetel rangkai salindia menjadi 12 detik terakhir dan mengulanginya berkali-kali. (Anda dapat menempatkan

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Animasi terdiri dari mengubah nilai 'visibilitas'. Di awal animasi, nilainya disetel ke 'terlihat'. Karena saya memiliki tiga slide, satu slide harus tetap terlihat selama sepertiga waktu dan tidak terlihat selama dua pertiga, jadi pada 33% animasi saya mengubah nilainya menjadi 'tersembunyi' lagi. Aturan ini dikelompokkan dalam aturan '@keyframes', seperti ini

@keyframes autoplay1 {
  0% {visibility: visible}
  33.33% {visibility: hidden}
}

Namun seperti ini, ketiga slide dianimasikan secara bersamaan dan menjadi terlihat pada saat yang bersamaan. Saya perlu mengatur waktu kapan setiap animasi slide dimulai. Properti 'animation-delay' dirancang untuk itu

#slideset1 > *:nth-child(1) {animation-delay: 0s}
#slideset1 > *:nth-child(2) {animation-delay: 4s}
#slideset1 > *:nth-child(3) {animation-delay: 8s}

Inilah hasilnya. (Untuk kenyamanan, saya menambahkan tombol untuk memulai dan menjeda animasi. Tombol itu dijelaskan di bawah)

Metode 2 - atas

Pada contoh sebelumnya, slide benar-benar diposisikan di dalam wadah dan dibuat transparan. Salah satu cara lain untuk menyembunyikannya adalah dengan memposisikannya di luar penampung dan memberi tahu penampung untuk menyembunyikan konten di luarnya dengan 'meluap'. tersembunyi'

Bahkan, jika Anda memindahkan slide masuk dan keluar wadah, Anda juga dapat menganimasikan gerakan tersebut, sehingga Anda melihat setiap slide bergeser masuk atau keluar. pengaruh transisi yang bagus. Itulah yang saya lakukan pada contoh di bawah ini

Aturan untuk elemen penampung hampir sama seperti sebelumnya, dengan tambahan 'meluap'. tersembunyi', jadi slide apa pun yang ditempatkan di luar penampung tidak ditampilkan

#slideset2 {height: 10em; position: relative;
  overflow: hidden}

Setiap slide awalnya diposisikan tepat di bawah pojok kiri bawah. ('100%' berarti 100% dari tinggi wadah. ) Dan setiap slide memiliki animasi yang disebut 'putar otomatis2', yang ditentukan di bawah, untuk mengubah posisinya dari waktu ke waktu

#slideset2 > * {position: absolute; top: 100%; left: 0;
  animation: 12s autoplay2 infinite ease-in-out}

The 'ease-in-out' menentukan percepatan gerakan. Ini adalah salah satu dari kumpulan kata kunci yang telah ditentukan sebelumnya. 'Ease-in-out' berarti gerakan mulai perlahan, dipercepat, dan akhirnya melambat lagi. Itulah yang terlihat terbaik untuk tujuan kita

Animasi memindahkan slide dari bawah bagian bawah penampung ke bagian atas dalam waktu setengah detik (4% dari 12 detik). Posisi tetap tidak berubah hingga sepertiga animasi. Kemudian perosotan bergerak ke atas lagi dalam waktu setengah detik hingga benar-benar berada di atas wadah. Itu tetap di sana sampai animasi dimulai kembali

@keyframes autoplay2 {
  0% {top: 100%}
  4% {top: 0%}
  33.33% {top: 0%}
  37.33% {top: -100%}
  100% {top: -100%}
}

Seperti sebelumnya, masing-masing dari tiga slide harus memulai animasi pada waktu yang berbeda

#slideset2 > *:nth-child(1) {animation-delay: 0s}
#slideset2 > *:nth-child(2) {animation-delay: 4s}
#slideset2 > *:nth-child(3) {animation-delay: 8s}

Dan inilah hasilnya. Perhatikan bahwa slide pertama tidak terlihat sebelum animasi dimulai

Metode 3 – margin-atas

Metode ketiga menganimasikan properti 'margin-top' dari slide pertama untuk memindahkan slide ke dalam tampilan, lalu memindahkannya ke atas agar slide kedua muncul, dan bahkan lebih tinggi lagi untuk membiarkan slide berikutnya berpindah ke tampilan

Hanya satu properti dari satu slide yang perlu dianimasikan. Slide lainnya diletakkan di bawah yang pertama dengan cara normal dan bergerak ke atas saat yang pertama bergerak ke atas. Semua slide harus memiliki ketinggian yang sama, yang juga merupakan ketinggian DIV kontainer. Wadah itu memiliki 'meluap'. tersembunyi' sehingga slide yang berada di atas atau di bawahnya tetap tidak terlihat

Seperti sebelumnya, saya mengatur tinggi wadah menjadi 10em dan juga mengatur tinggi setiap slide ke nilai yang sama ('100%'). Slide tidak boleh memiliki margin;

#slideset3 {height: 10em; position: relative;
  overflow: hidden}
#slideset3 > * {height: 100%; box-sizing: border-box;
  overflow: hidden}

Slide pertama mendapatkan animasi yang memindahkannya dalam waktu setengah detik (4% dari 12 detik) dari bawah penampung ke atas penampung. Sekitar sepertiga dari animasi, slide dipindahkan ke atas 10em lagi, yang menyebabkan slide kedua disejajarkan dengan wadah. Sepertiga kemudian, slide pertama bergerak ke atas lagi. Dan di akhir animasi, ia bergerak untuk terakhir kalinya, menyebabkan slide ketiga keluar dari bagian atas wadah. Kemudian animasi dimulai lagi

#slideset1 {height: 10em; position: relative}

Perhatikan bahwa ada sedikit 'celah' dalam animasi saat dimulai kembali. Pertama slide bergerak keluar dari atas dalam waktu sekitar setengah detik dan kemudian mereka bergerak kembali dari bawah. Jadi ada saatnya wadah itu kosong dari perosotan. Itu tidak seperti metode sebelumnya, di mana slide pertama mulai bergerak masuk saat slide terakhir masih bergerak keluar

Metode 4 – tinggi

Cara untuk membuat elemen tidak terlihat adalah dengan menghapus border dan padding-nya dan menyetel tingginya ke nol. Jika properti 'meluap' juga disetel ke 'tersembunyi', elemen tersebut sama sekali tidak terlihat

Dalam hal ini Anda tidak perlu mengetahui ketinggian maksimum perosotan terlebih dahulu. Animasi hanya mengubah ketinggian antara 0 dan 'otomatis'

Namun, jika slide yang berbeda memiliki ketinggian yang berbeda, jika berarti konten apa pun setelah slide bergerak bersama dengan slide. Anda dapat melihat hal itu terjadi pada contoh di bawah ini. Apakah itu masalah atau fitur tergantung pada apa yang muncul setelah slide…

Aturan berikut memberikan animasi pada setiap slide dan menyetel 'luapan' menjadi 'tersembunyi', sehingga tidak ada konten yang ditampilkan setelah tingginya disetel ke 0

#slideset1 {height: 10em; position: relative}

Animasi dalam hal ini dimulai dengan menyetel ketinggian ke 'otomatis' dan menambahkan padding dan border yang diinginkan. Pada sepertiga animasi, tinggi disetel ke 0 dan batas serta bantalan dihapus dalam sepersekian detik. Mereka tetap nol hingga akhir animasi

#slideset1 {height: 10em; position: relative}

Seperti pada metode sebelumnya, animasi setiap slide disesuaikan dengan waktu. Namun, kami tidak menunda permulaannya dalam hal ini, karena semua slide akan terlihat sampai animasi menyembunyikannya. Sebagai gantinya, kami memulai animasi slide kedua dan ketiga segera, tetapi sebagian animasi. Slide kedua dimulai dua pertiga dari animasi (seolah-olah sudah selesai 8 dari 12 detik). Dan slide ketiga dimulai sepertiga ke dalam animasi

#slideset1 {height: 10em; position: relative}

Metode 5 – indeks-z

Metode kelima menggunakan properti 'z-index' untuk meletakkan slide di depan atau di belakang wadah. Jika wadahnya buram, artinya slide yang ada di belakangnya tidak terlihat

Wadah harus cukup besar untuk menyembunyikan slide terbesar. Saya tahu bahwa tinggi slide saya tidak lebih dari 10em, jadi saya mengatur wadah ke ketinggian itu. Itu mendapat 'posisi. relatif' sehingga slide dapat diposisikan di dalamnya dan latar belakang untuk membuatnya buram. Dalam hal ini saya membuat latar belakang putih, untuk berbaur dengan sisa halaman

#slideset1 {height: 10em; position: relative}

Saya memposisikan setiap slide di kiri atas wadah, tetapi dengan 'indeks-z' negatif, untuk meletakkannya di belakang latar belakang wadah

#slideset1 {height: 10em; position: relative}

Animasinya sederhana. Itu hanya mengubah 'indeks-z' antara 0 (meletakkan slide di depan wadah induk) dan -1 (di belakangnya). Untuk sepertiga dari waktu, 'z-index' adalah 0, hingga sepersekian detik sebelum tanda sepertiga, dan kemudian menjadi -1, hingga animasi berulang

#slideset1 {height: 10em; position: relative}

Seperti sebelumnya, kami memulai animasi pada waktu yang berbeda untuk setiap slide

#slideset1 {height: 10em; position: relative}

Dan inilah hasilnya

Metode 6 – opasitas

Metode keenam menggunakan properti 'opacity' untuk membuat slide tidak terlihat. Opacity adalah angka antara 0 (sepenuhnya transparan) dan 1 (sepenuhnya buram) sehingga juga dapat digunakan untuk efek transisi. slide fade in dan fade out

Semua slide diposisikan di tempat yang sama, dengan posisi absolut, jadi saya juga perlu menyediakan ruang yang cukup. Dalam hal ini saya tahu bahwa yang terbesar tingginya 10em. Jadi inilah aturan untuk container DIV

#slideset1 {height: 10em; position: relative}

Setiap slide diposisikan dalam wadah dan mendapatkan 'opasitas' 0, i. e. , itu sepenuhnya transparan (tidak terlihat)

#slideset1 {height: 10em; position: relative}

Untuk animasi ini saya memilih perkembangan linier, bukan 'kemudahan keluar' yang saya gunakan di beberapa metode lain. Untuk efek fading menurut saya lebih bagus

Animasi mengubah opasitas dari 0 menjadi 1 dalam setengah detik, dan, 3½ detik kemudian, mengubahnya kembali menjadi 0, sekali lagi dalam setengah detik (antara 33. 33% dan 37. 33%)

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Seperti sebelumnya, setiap slide memulai animasinya 4 detik setelah slide sebelumnya. Itu berarti setiap slide mulai memudar persis seperti slide sebelumnya mulai memudar. (33. 33% dari 12 detik adalah 4 detik. )

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Menjeda animasi

Jika ada sesuatu yang bergerak di halaman, sebaiknya berikan cara untuk menghentikannya. Pembaca mungkin ingin lebih banyak waktu untuk melihat sesuatu sebelum menghilang. Memang, menghentikan animasi adalah salah satu pedoman aksesibilitas W3C

Menghentikan animasi CSS dilakukan dengan properti yang disebut 'animation-play-state'. Ini memiliki dua nilai, 'running' (default) dan 'pause'. Caranya adalah dengan menambahkan kotak centang ke halaman dan menyetel properti ke 'dijeda', hanya jika pengguna mencentang kotak itu

Properti harus mendaftar ke slide. Jadi untuk dapat membuat pemilih yang memilih slide berdasarkan apakah ada kotak centang yang dicentang dalam konteksnya, kotak centang harus ada sebelum slide. Markup dengan kotak centang yang ditambahkan dapat terlihat seperti ini

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Dan aturan CSS untuk menghentikan animasi terlihat seperti ini

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Itu memilih semua slide di slideset1 jika slideset itu mengikuti elemen pause1 dan elemen pause1 itu sedang diperiksa

Jika kotak centang di atas slide tidak diinginkan, Anda dapat menyembunyikan kotak centang dan meletakkan elemen LABEL di tempat lain. LABEL dapat diletakkan di mana saja. Itu ditautkan ke kotak centang dengan atribut FOR-nya

Pada contoh di atas, saya memberi label setelah slide dan menyembunyikan kotak centang, dengan aturan seperti ini

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Saya juga ingin labelnya berbeda tergantung pada apakah animasi sedang berjalan atau dijeda. Jadi saya memberi label dua konten berbeda (dua elemen SPAN), hanya satu yang ditampilkan sekaligus

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Itu, bagaimanapun, membatasi sedikit di mana Anda dapat meletakkan LABEL, karena itu harus memungkinkan untuk menulis pemilih yang memilih kotak centang dan label. Elemen LABEL saya ada di dalam P yang merupakan saudara dari kotak centang, dan aturan saya terlihat seperti ini

#slideset1 > * {visibility: hidden; position: absolute;
  top: 0; left: 0; animation: 12s autoplay1 infinite}

Lagi

Anda juga dapat melihat tombol putar di sebelah setiap tombol jeda. Saya menambahkannya karena terlihat menarik dan menunjukkan bahwa animasi sedang berlangsung, meskipun slide saat ini tidak bergerak. Saya tidak akan menjelaskan cara kerjanya di sini, tetapi Anda dapat mempelajari sumber halaman ini

Saat Anda melakukannya, Anda juga akan melihat bahwa sebagian besar aturan CSS disertakan dalam blok '@supports (animation-delay. 4s) {…}'. Itu untuk menyembunyikan aturan yang berkaitan dengan animasi dari browser dan perender CSS lain yang tidak menerapkan animasi. Slide tidak akan terlihat bagus, atau mungkin sama sekali tidak terlihat, jika beberapa properti CSS diterapkan, tetapi bukan animasi itu sendiri

Dengan cara itu saya juga menyembunyikan LABEL dengan tombol putar/jeda dari implementasi yang tidak melakukan animasi, karena tombol tersebut tidak ada gunanya dalam kasus itu

Bagaimana Anda membuat animasi geser di CSS?

Bagaimana Anda menganimasikan ke atas dan ke bawah dalam CSS?

Bagaimana Anda membuat teks meluncur di CSS?

Bagaimana cara menggunakan animasi keyframe di CSS?