yükte css3 geçiş animasyonu?

196

Javascript kullanmadan sayfa yüklemesinde CSS3 geçiş animasyonu kullanılabilir mi?

Bu benim istediğim, ama sayfa yük:

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

Şimdiye kadar bulduğum şey

  • CSS3 geçiş gecikmesi , elemanlar üzerindeki etkileri geciktirmenin bir yolu. Sadece fareyle üzerine gelindiğinde çalışır.
  • CSS3 Keyframe , yük üzerinde çalışıyor ancak aşırı yavaş. Bu yüzden faydalı değil.
  • CSS3 geçişi yeterince hızlıdır, ancak sayfa yüklenmesinde animasyon oluşturmaz.
css  webkit  css-transitions  css-animations 
— Jens Törnell
kaynak
— NickFitz
2
Ana kareler bunu başaracak ve CSS3 animasyonları desteklenmediğinde en iyi yedeklemeyi sağlayacaktır. Sizce neden çok yavaşlar?
— zachleat
Selam! Bağlantı şimdi koptu ve nereye gitmek gerektiğini bilmiyorum, bu yüzden birisi lütfen düzeltebilir miyim!
— Linux4Life531

Yanıtlar:

460

Sen edebilir bir çalıştırmak CSS herhangi bir JavaScript kullanmadan sayfa yüklendiğinde animasyon; sadece CSS3 Anahtar Kareleri kullanmanız gerekir .

Bir Örneğe Bakalım ...

Aşağıda, yalnızca CSS3 kullanarak yerine kayan bir gezinme menüsünün gösterimi verilmiştir :

@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>
Snippet'i genişlet

Yerle bir etmek...

Buradaki önemli kısımlar dediğimiz ana kare animasyonu slideInFromLeft...

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

... temelde "başlangıçta başlık, ekranın sol kenarından tam genişliğinde olacak ve sonunda yer alacak" diyor.

İkinci bölüm bu slideInFromLeftanimasyonu çağırıyor :

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

Yukarıda kısayol versiyonu ama netlik için ayrıntılı versiyon:

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 */

İçeriği kaydırmak veya alanlara dikkat çekmek gibi her türlü ilginç şeyi yapabilirsiniz.

İşte W3C'nin söyledikleri.

— Chris Spittles
kaynak
20
Bunu daha önce değil, sayfa yüklemesinde çalıştıran şey nedir?
— Rolf
2
Yukarıdaki soruyu cevaplamak için varsayılan olarak animasyon uygulandıktan 0 saniye sonra gecikmeden başlar. Bunu kontrol etmek için ayarlanabilen ilave bir animasyon-gecikme özelliği vardır. Bkz: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Animasyonun belge yüklendikten sonra başlayacağından emin olmak için animasyon kodunu gövde öğesinin altındaki stil sayfasına veya gövde öğesinin altındaki stil etiketine yerleştirin.
— TaylorMac
@SuzanneEdelmanCreoBilgim, IE9 geçiş özelliğini desteklemiyor. Seçenekleriniz JS veya zarif bozulma olabilir.
— Chris Spittles
1
Mükemmel cevap, 2019'da bana yardımcı oldu!
— Gosi
28

Çok az Javascript gereklidir:

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

Şimdi 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;
}

Sorunun "Javascript olmadan" dediğini biliyorum, ancak bence Javascript'in bir satırını içeren kolay bir çözüm olduğunu belirtmeye değer.

Hatta satır içi Javascript, böyle bir şey olabilir:

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

Gerekli olan tüm JavaScript budur.

— Rolf
kaynak
2
Biraz Düzeltme: <body onload = "document.body.setAttribute ('sınıf', 'yüklü')">
— Ivan
1
Sayfayı onLoad olayında beklemeye gerek yoksa bu kodu </body> etiketinden önce ekleyin: <script type = "text / javascript"> document.body.setAttribute ('class', 'loaded'); </script>
— Ivan
7
Mevcut bodysınıfların geçersiz kılınmasını önlemek için document.body.classList.add('loaded)
— şunları
1
Bulduğum document.body.className += " loaded";için biraz daha az ayrıntılı olarak ekleyerekloadedSınıfı mevcut sınıflara için .
— Pim Schaaf
1
@PimSchaaf Öneriniz için teşekkürler, tamamen mantıklı. Şimdi düzenleyeceğim. Günümüzde biraz daha zarif (ancak daha az uyumlu) olan classList'i de kullanabilirsiniz.
— Rolf
21

OP sorusu için bir tür iş bulduğumu düşünüyorum - sayfanın 'on.load' başından bir geçiş yerine - opaklık solması için bir animasyon kullanmanın aynı etkiye sahip olduğunu buldum, ( OP ile aynı şey).

Bu yüzden gövde metninin sayfa yüklemesinde beyazdan (site arka planıyla aynı) siyah metin rengine solmasını istedim - ve sadece Pazartesi'den beri kodlama yaptım, bu yüzden bir 'on.load' tarzı şey kodu arıyordum, ama henüz JS bilmiyorum - işte benim için iyi çalıştı benim kod. 

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

Ve her ne sebeple olursa olsun, bu .classsadece #id'ler için işe yaramaz (en azından benimkinde değil)

Umarım bu yardımcı olur - bildiğim gibi bu site bana çok yardımcı oluyor!

— Lee John
kaynak
6

Bu zor bir iş.

Cevap "gerçekten değil".

CSS işlevsel bir katman değildir. Ne olduğu veya ne zaman olduğu konusunda hiçbir farkındalığı yoktur. Sadece sunum eklemek için kullanılırFarklı "bayraklara" (sınıflar, kimlikler, durumlar) katmanı .

Varsayılan olarak, CSS / DOM, CSS'nin kullanması için herhangi bir "yükte" durumu sağlamaz. JavaScript kullanmak / kullanabilmek isterseniz, bodybazı CSS'yi etkinleştirmek için bir sınıf veya başka bir şey tahsis edersiniz .

Olduğu söyleniyor, bunun için bir kesmek oluşturabilirsiniz. Burada bir örnek vereceğim, ancak durumunuz için geçerli olabilir veya olmayabilir.

"Kapat" ın "yeterince iyi" olduğu varsayımıyla çalışıyoruz:

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

İşte CSS stil sayfamızdan bir alıntı:

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

Ayrıca, modern tarayıcıların aşamalı olarak oluşturduğu varsayımına sahibiz, bu yüzden son elementimiz en son olacak ve bu CSS en son etkinleştirilecek.

— kurnaz
kaynak
1

@ Rolf'un çözümüne benzer, ancak harici işlevlere veya sınıfla oynamaya atıfta bulunun. Opaklık yüklendikten sonra 1 olarak sabit kalacaksa, opaklığı stil yoluyla doğrudan değiştirmek için satır içi komut dosyasını kullanın. Örneğin

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

burada CSS sistemi "fadein" her Rolf için tanımlanır, geçiş tanımlanır ve opaklık ilk duruma ayarlanır (yani 0)

tek yakalama, çalışma onload olayı olmadığından SPAN veya DIV elemanları ile çalışmadığıdır

— user3907296
kaynak
1

Vücudun vurgulu ile başlat Farenin ekranda ilk hareket ettiğinde başlayacaktır, ki bu çoğunlukla varıştan sonra bir saniye içinde, burada sorun ekrandan çıkarken tersine dönmesidir.

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

aklıma gelen en iyi şey: http://jsfiddle.net/faVLX/

tam ekran: http://jsfiddle.net/faVLX/embedded/result/

Düzenleme aşağıdaki açıklamalara bakın:
Fareyle üzerine gelme olmadığından bu herhangi bir dokunmatik ekranlı cihazda çalışmaz, dolayısıyla kullanıcı dokunmadığı sürece içeriği görmez. - Zengin Bradshaw

— beardhatcode
kaynak
Evet, bunu kendim anladım. Başka hiçbir şey işe yaramıyorsa, tamam bir çözümdür. Bunun için bir oy.
— Jens Törnell
13
Bu korkunç bir fikirdir - herhangi bir dokunmatik ekran cihazında fareyle üzerine gelme yoktur, dolayısıyla kullanıcı dokunmadığı sürece içeriği görmez.
— Rich Bradshaw
1

Sadece 3 sn gecikmeli CSS

burada dikkat etmeniz gereken birkaç nokta:

  • bir çağrıda birden çok animasyon
  • yalnızca gerçek olanı (bizim durumumuzdaki ikincisi) geciktiren bir bekleme animasyonu oluşturuyoruz .

Kod:

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
kaynak
0

Tamam Sayfa sadece css geçişleri (tür!) Kullanarak yüklendiğinde bir animasyon elde etmeyi başardılar:

Ben 2 css stil sayfaları oluşturduk: birincisi nasıl html animasyon önce tarz istiyorum ... ve ikincisi ben animasyon gerçekleştirildikten sonra sayfanın bakmak istiyorum.

Bunu nasıl başardığımı tam olarak anlamıyorum ama sadece iki css dosyası (her ikisi de belgemin başında) aşağıdaki gibi bazı javascript ile ayrıldığında çalışır.

Bunu Firefox, safari ve opera ile test ettim. Bazen animasyon çalışır, bazen doğrudan ikinci css dosyasına atlar ve bazen sayfa yükleniyor gibi görünür, ancak hiçbir şey görüntülenmez (belki sadece ben mi?)

<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" />

İşte devam eden web siteme bir link: http://www.hankins-design.co.uk/beta2/test/index.html

Belki yanılıyorum ama css geçişleri desteklemeyen tarayıcılar gecikme veya süre olmadan doğrudan ikinci css dosyasına atlamak gerekir gibi herhangi bir sorun olmaması gerektiğini düşündüm.

Arama motoru dostu bu yöntemin nasıl olduğunu görüşlerini bilmek ilgileniyorum. Sanırım siyah şapkamla bir sayfayı anahtar kelimelerle doldurabilir ve opaklığına 9999'luk bir gecikme uygulayabilirim.

Arama motorlarının geçiş-gecikme özelliğiyle nasıl başa çıktıklarını ve yukarıdaki yöntemi kullanarak bile sayfadaki bağlantıları ve bilgileri görüp görmeyeceğini bilmek isterim.

Daha da önemlisi, sayfa her yüklendiğinde bunun neden tutarlı olmadığını ve bunu nasıl düzeltebileceğimi gerçekten bilmek istiyorum!

Umarım bu başka bir şey yoksa bazı görüş ve görüşler üretebilir!

— Michael Walkling
kaynak
0

Başka biri aynı anda iki geçiş yaparken sorun yaşıyorsa, işte yaptığım şey bu. Sayfa yüklenirken yukarıdan aşağıya metin gelmek gerekiyordu.

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;
}

Neden 1 seçicide 2 geçiş bildirimi kullanmaya çalıştığımı ve her ikisini de kullanacağını düşünmüyorum.

— S3C
kaynak
0

Daha da basit bir çözüm (yine de [bir satır satır içi] javascript ile):

Vücut etiketi olarak bunu kullanın: Not olduğunu body.veya this.benim için çalışmadı. Sadece uzun; (Linux Chromium) querySelectorkullanımına izin classList.removever

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

ve bu satırı diğer css kurallarınızın üstüne ekleyin.

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

Bunun opaklığa (OP [diğer posterler] tarafından istendiği gibi) yalnızca geçiş tetikleyicisi olarak opaklığı kullanarak uygulanabileceğini unutmayın. (diğer herhangi bir css yönetiminde aynı şekilde çalışabilir ve tetikleme arasında açıklık gecikmesi için birden fazla sınıf kullanabilirsiniz)

Mantık aynı. Dönüştürmeyi zorunlu kılma ( belge :none !importanttüm alt öğelerinde body.onloadve belge yüklendikten sonra, css'inizde belirtilen tüm öğelerdeki tüm geçişi tetiklemek için sınıfı kaldırın.

Aşağıdaki ilk cevap

İşte bunun tersi bir çözüm:

  1. Html düzeninizi yapın ve css'yi nihai sonucunuza göre (istediğiniz tüm dönüşümle) ayarlayın.
  2. Geçiş özelliğini istediğiniz gibi ayarlayın
  3. yükten sonra dönüştürmek istediğiniz öğelere bir sınıf ekleyin (örneğin: waitload). CSS anahtar kelimesi ! Burada anahtar kelimedir.
  4. Belge yüklendikten sonra, dönüşümü başlatmak üzere sınıfı öğelerden kaldırmak için JS kullanın (ve geçişi kaldırın: none override).

Birden çok elemanda çoklu geçişle çalışır. Tarayıcılar arası uyumluluğu denemedi.

#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
kaynak
-2

Gerçekten değil, en kısa zamanda CSS uygulanır, ancak öğeler henüz çizilmeyebilir. 1 veya 2 saniyelik bir gecikmeyi tahmin edebilirsiniz, ancak internet hızına bağlı olarak çoğu insan için doğru görünmeyecektir.

Buna ek olarak, örneğin bir şeyin solmasını istiyorsanız, içeriğin teslim edilmesini gizleyen CSS gerekir. Kullanıcının CSS3 geçişleri yoksa, bunu asla görmezdi.

JQuery (kullanım kolaylığı için + diğer UA'lar için animasyon eklemek isteyebilirsiniz) ve bunun gibi bazı JS kullanmanızı öneririz: 

$(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.
});

CSS'ye eklenen geçişlerle birlikte. Bu, gerektiğinde eski tarayıcılarda ikinci CSS yerine animate kullanımına kolayca izin verme avantajına sahiptir.

— Zengin Bradshaw
kaynak
17
Bu cevap neden kabul edildi? Sorunun gerçekten istediği hiçbir şey yapmıyor. Basitçe (ve çok çabuk, bazen farkedilemez bir şekilde) elemanı görünmez başlatır, bir saniyenin (200 ms) küçük bir kısmını bekler ve ardından anında tekrar görünür hale getirir. Bu bir solma değil, son kontrol ettim.
— VoidKing
Buna bir css geçişi dahil #id_to_fade inedersiniz, kabul etsem de, bu cevaptan o kadar açık değildir.
— Zengin Bradshaw
jQuery çağrısına başka bir .css ({transition: 'opacity 2s'}) eklensin mi? Yoksa sadece css'inizde mi? Bunun aptalca bir soru gibi hissedeceğimi hissediyorum ...
— VoidKing
3
Tamam - gerçekten bir demo hazırlamalıydım. CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-öneklerinde de.
— Zengin Bradshaw
2
Bu kabul edilen cevap olmamalı, anahtar kareleri kullanmak için bir yol var.
— Eduardo Naveda
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.