animasi transisi CSS3 dimuat?

195

Apakah mungkin menggunakan animasi transisi CSS3 pada pemuatan halaman tanpa menggunakan Javascript?

Ini adalah jenis yang saya inginkan, tetapi pada pemuatan halaman:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

Apa yang saya temukan sejauh ini

  • CSS3 transisi-delay , cara untuk menunda efek pada elemen. Hanya berfungsi pada hover.
  • CSS3 Keyframe , berfungsi pada beban tetapi sangat lambat. Tidak berguna karena itu.
  • Transisi CSS3 cukup cepat tetapi jangan menghidupkan halaman memuat.
css  webkit  css-transitions  css-animations 
— Jens Törnell
sumber
— NickFitz
2
Keyframes akan mencapai ini dan memberikan fallback terbaik ketika animasi CSS3 tidak didukung. Menurut Anda mengapa mereka terlalu lambat?
— zachleat
Hai! Tautannya sekarang rusak dan saya tidak tahu ke mana ia harus pergi, jadi bisakah seseorang memperbaikinya?
— Linux4Life531

Jawaban:

459

Anda dapat menjalankan animasi CSS pada pemuatan halaman tanpa menggunakan JavaScript apa pun; Anda hanya perlu menggunakan CSS3 Keyframes .

Mari Kita Lihat Contoh ...

Berikut ini demonstrasi menu navigasi yang hanya menggunakan CSS3 :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
Luaskan cuplikan

Memecahnya...

Bagian penting di sini adalah animasi keyframe yang kami sebut slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... yang pada dasarnya mengatakan "di awal, tajuk akan berada di tepi kiri layar dengan lebar penuh dan pada akhirnya akan berada di tempat".

Bagian kedua menyebut slideInFromLeftanimasi itu:

animation: 1s ease-out 0s 1 slideInFromLeft;

Di atas adalah versi singkat tetapi di sini adalah versi verbose untuk kejelasan:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Anda dapat melakukan segala macam hal menarik, seperti menggeser konten, atau menarik perhatian ke area.

Inilah yang dikatakan W3C.

— Chris Spittles
sumber
20
Apa yang membuat ini berjalan pada pemuatan halaman, dan bukan sebelumnya?
— Rolf
2
Hanya untuk menjawab pertanyaan di atas, muncul secara default animasi dimulai 0s setelah diterapkan, tanpa penundaan. Ada properti tambahan, penundaan animasi, yang dapat diatur untuk mengontrol ini. Lihat: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Untuk memastikan animasi akan dimulai setelah dokumen dimuat, tempatkan kode animasi dalam lembar gaya di bawah elemen tubuh atau tag gaya di bagian bawah elemen tubuh.
— TaylorMac
@ SuzanneEdelmanCreoconcept sepengetahuan saya, IE9 tidak mendukung properti transisi. Pilihan Anda akan menjadi JS atau degradasi yang anggun.
— Chris Spittles
1
Jawaban yang sangat bagus, telah membantu saya di tahun 2019!
— Gosi
28

Diperlukan sedikit Javascript:

window.onload = function() {
    document.body.className += " loaded";
}

Sekarang CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

Saya tahu pertanyaan mengatakan "tanpa Javascript", tapi saya pikir ada baiknya menunjukkan bahwa ada solusi mudah yang melibatkan satu baris Javascript.

Bahkan bisa berupa Javascript sebaris, kira-kira seperti itu:

<body onload="document.body.className += ' loaded';" class="fadein">

Itu semua JavaScript yang dibutuhkan.

— Rolf
sumber
2
Perbaikan kecil: <body onload = "document.body.setAttribute ('class', 'loaded')">
— Ivan
1
Jika tidak perlu menunggu halaman onLoad acara, masukkan kode ini sebelum tag </body>: <script type = "text / javascript"> document.body.setAttribute ('class', 'loaded'); </script>
— Ivan
7
Untuk menghindari override bodykelas yang ada, gunakan:document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
Saya menemukan document.body.className += " loaded";untuk menjadi sedikit kurang verbose untuk menambahkan ini loadedkelas untuk kelas yang ada.
— Pim Schaaf
1
@PimSchaaf Terima kasih atas saran Anda, ini sangat masuk akal. Saya akan mengeditnya sekarang. Saat ini Anda juga dapat menggunakan classList yang sedikit lebih elegan (tetapi kurang kompatibel).
— Rolf
20

Saya pikir saya telah menemukan semacam pekerjaan untuk pertanyaan OP - alih-alih transisi yang dimulai 'on.load' halaman - saya menemukan bahwa menggunakan animasi untuk opacity fade in memiliki efek yang sama, (saya mencari hal yang sama dengan OP).

Jadi saya ingin agar teks badan memudar dari putih (sama seperti latar belakang situs) ke warna teks hitam pada pemuatan halaman - dan saya hanya mengkodekan sejak Senin jadi saya mencari kode hal gaya 'on.load', tetapi belum tahu JS - jadi di sini adalah kode saya yang bekerja dengan baik untuk saya. 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

Dan untuk alasan apa pun, ini tidak bekerja .classhanya untuk #id(paling tidak untuk saya)

Semoga ini bisa membantu - karena saya tahu situs ini banyak membantu saya!

— Lee John
sumber
6

Nah, ini yang sulit.

Jawabannya adalah "tidak juga".

CSS bukan lapisan fungsional. Itu tidak memiliki kesadaran tentang apa yang terjadi atau kapan. Ini digunakan hanya untuk menambah presentasi lapisan ke "bendera" yang berbeda (kelas, id, negara bagian).

Secara default, CSS / DOM tidak menyediakan segala keadaan "saat memuat" untuk digunakan CSS. Jika Anda ingin / dapat menggunakan JavaScript, Anda akan mengalokasikan kelas untukbody atau sesuatu untuk mengaktifkan beberapa CSS.

Yang sedang berkata, Anda dapat membuat hack untuk itu. Saya akan memberikan contoh di sini, tetapi mungkin atau mungkin tidak berlaku untuk situasi Anda.

Kami beroperasi dengan asumsi bahwa "tutup" adalah "cukup baik":

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

Berikut kutipan dari stylesheet CSS kami:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

Kami juga pada asumsi bahwa browser modern membuat progresif, sehingga elemen terakhir kami akan membuat yang terakhir, dan CSS ini akan diaktifkan terakhir.

— licik
sumber
1

Mirip dengan solusi @ Rolf, tetapi lewati referensi ke fungsi eksternal atau bermain dengan kelas. Jika opacity ingin tetap menjadi 1 setelah dimuat, cukup gunakan skrip inline untuk secara langsung mengubah opacity melalui style. Sebagai contoh

<body class="fadein" onload="this.style.opacity=1">

di mana CSS sytle "fadein" didefinisikan per @ Rolf, mendefinisikan transisi dan mengatur opacity ke keadaan awal (mis. 0)

satu-satunya hasil adalah bahwa ini tidak bekerja dengan elemen SPAN atau DIV, karena mereka tidak memiliki event onload yang berfungsi

— pengguna3907296
sumber
1

memulainya dengan melayang-layang dari tubuh daripada Ini akan mulai ketika mouse pertama kali bergerak di layar, yang sebagian besar dalam hitungan detik setelah kedatangan, masalahnya di sini adalah bahwa ia akan mundur ketika keluar dari layar.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

itulah hal terbaik yang dapat saya pikirkan: http://jsfiddle.net/faVLX/

layar penuh: http://jsfiddle.net/faVLX/embedded/result/

Sunting lihat komentar di bawah:
Ini tidak akan berfungsi pada perangkat layar sentuh apa pun karena tidak ada kursor, sehingga pengguna tidak akan melihat konten kecuali mereka mengetuknya. - Rich Bradshaw

— kode beardhat
sumber
Ya, saya menemukan jawabannya sendiri. Ini solusi yang baik jika tidak ada yang berhasil. Satu suara untuk itu.
— Jens Törnell
13
Ini adalah ide yang buruk - pada perangkat layar sentuh mana pun tidak ada kursor, sehingga pengguna tidak akan melihat konten kecuali mereka mengetuknya.
— Rich Bradshaw
1

CSS hanya dengan penundaan 3s

beberapa poin untuk diambil di sini:

  • banyak animasi dalam satu panggilan
  • kami membuat animasi tunggu yang hanya menunda yang sebenarnya (yang kedua dalam kasus kami).

Kode:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
— Claudiu
sumber
0

Oke, saya berhasil membuat animasi ketika halaman memuat hanya transisi css (semacam!):

Saya telah membuat 2 style sheet css: yang pertama adalah bagaimana saya ingin html ditata sebelum animasi ... dan yang kedua adalah bagaimana saya ingin halaman terlihat setelah animasi dilakukan.

Saya tidak sepenuhnya mengerti bagaimana saya telah mencapai ini tetapi hanya berfungsi ketika dua file css (keduanya di kepala dokumen saya) dipisahkan oleh beberapa javascript sebagai berikut.

Saya telah menguji ini dengan Firefox, safari dan opera. Kadang-kadang animasi bekerja, kadang-kadang melompat langsung ke file css kedua dan kadang-kadang halaman tampaknya memuat tetapi tidak ada yang ditampilkan (mungkin hanya saya?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

Berikut ini tautan ke situs web work-in-progress saya: http://www.hankins-design.co.uk/beta2/test/index.html

Mungkin saya salah, tetapi saya pikir browser yang tidak mendukung transisi css seharusnya tidak memiliki masalah karena mereka harus langsung beralih ke file css kedua tanpa penundaan atau durasi.

Saya tertarik untuk mengetahui pandangan tentang bagaimana mesin pencari ramah metode ini. Dengan topi hitam saya, saya kira saya bisa mengisi halaman dengan kata kunci dan menerapkan penundaan 9999 pada opacity-nya.

Saya akan tertarik untuk mengetahui bagaimana mesin pencari berurusan dengan atribut transisi-delay dan apakah, menggunakan metode di atas, mereka bahkan akan melihat tautan dan informasi pada halaman.

Lebih penting lagi, saya benar-benar ingin tahu mengapa ini tidak konsisten setiap kali halaman dimuat dan bagaimana saya dapat memperbaikinya!

Saya harap ini dapat menghasilkan beberapa pandangan dan pendapat jika tidak ada yang lain!

— Michael Walkling
sumber
0

Jika ada orang lain yang kesulitan melakukan dua transisi sekaligus, inilah yang saya lakukan. Saya membutuhkan teks untuk datang dari atas ke bawah pada pemuatan halaman.

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

Tidak tahu mengapa saya terus mencoba menggunakan 2 deklarasi transisi dalam 1 pemilih dan (tidak juga) berpikir itu akan menggunakan keduanya.

— s3c
sumber
0

Bahkan solusi yang lebih sederhana (masih dengan javascript [one line inline]):

Gunakan ini sebagai tag tubuh: Perhatikan itu body.atau this.tidak berfungsi untuk saya. Hanya panjang; querySelectormemungkinkan penggunaan classList.remove(Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

dan tambahkan baris ini di atas aturan css Anda yang lain.

body.onload *{ transform: none !important; }

Perhatikan bahwa ini dapat berlaku untuk opacity (seperti yang diminta oleh OP [poster lain]) hanya dengan menggunakan opacity sebagai pemicu transisi. (bahkan mungkin bekerja pada aturan css lainnya dengan cara yang sama dan Anda dapat menggunakan beberapa kelas untuk penundaan kejelasan antara pemicuan)

Logikanya sama. Menegakkan tidak ada transformasi (dengan :none !importantpada semua elemen anak body.onloaddan setelah dokumen dimuat menghapus kelas untuk memicu semua transisi pada semua elemen seperti yang ditentukan dalam css Anda.

JAWABAN PERTAMA DI BAWAH (LIHAT EDISI DI ATAS UNTUK JAWABAN PENDEK)

Berikut ini solusi sebaliknya:

  1. Buat tata letak html Anda dan atur css sesuai dengan hasil akhir Anda (dengan semua transformasi yang Anda inginkan).
  2. Setel properti transisi sesuai keinginan Anda
  3. tambahkan kelas (mis: waitload) ke elemen yang ingin Anda ubah SETELAH memuat. Kata kunci CSS ! Penting adalah kata kunci di sini.
  4. Setelah dokumen dimuat, gunakan JS untuk menghapus kelas dari elemen untuk memulai transformasi (dan menghapus transisi: tidak ada yang menimpa).

Bekerja dengan banyak transisi pada banyak elemen. Tidak mencoba kompatibilitas lintas-browser.

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}
<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>
— Louis Loudog Trottier
sumber
-2

Tidak juga, karena CSS diterapkan sesegera mungkin, tetapi elemen-elemennya mungkin belum digambar. Anda bisa menebak penundaan 1 atau 2 detik, tetapi ini tidak akan cocok untuk kebanyakan orang, tergantung pada kecepatan internet mereka.

Selain itu, jika Anda ingin memudar sesuatu misalnya, itu akan membutuhkan CSS yang menyembunyikan konten yang akan dikirimkan. Jika pengguna tidak memiliki transisi CSS3 maka mereka tidak akan pernah melihatnya.

Saya akan merekomendasikan menggunakan jQuery (untuk kemudahan penggunaan + Anda mungkin ingin menambahkan animasi untuk UA lain) dan beberapa JS seperti ini: 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

Bersamaan dengan transisi yang ditambahkan dalam CSS. Ini memiliki keuntungan dengan mudah memungkinkan penggunaan animasi daripada CSS kedua di browser lama jika diperlukan.

— Bradshaw yang kaya
sumber
17
Mengapa jawaban ini diterima? Itu tidak benar-benar melakukan apa pun yang ditanyakan oleh pertanyaan itu. Ini hanya (dan sangat cepat, kadang-kadang tanpa disadari) mulai elemen tidak terlihat, menunggu sebagian kecil dari yang kedua (200 ms) kemudian secara instan membuatnya terlihat lagi. Itu bukan pudar, terakhir saya periksa.
— VoidKing
Anda akan memasukkan transisi css pada #id_to_fade in, meskipun saya setuju, itu tidak jelas dari jawabannya.
— Rich Bradshaw
seperti pada, tambahkan .css lain ({transisi: 'opacity 2s'}) ke panggilan jQuery? Atau hanya di css Anda? Saya merasa bahwa saya akan merasa seperti ini adalah pertanyaan bodoh ...
— VoidKing
3
Tidak apa-apa - Seharusnya saya memasang demo. Dalam CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-awalan juga.
— Rich Bradshaw
2
Ini seharusnya bukan jawaban yang diterima, menggunakan bingkai kunci adalah cara untuk pergi.
— Eduardo Naveda
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.