196

Czy można używać animacji przejścia CSS3 przy ładowaniu strony bez użycia Javascript?

To jest coś, czego chcę, ale przy ładowaniu strony:

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

Co znalazłem do tej pory

CSS3 opóźnienie przejścia , sposób na opóźnienie efektów na elementach. Działa tylko po najechaniu myszą.
Klatka kluczowa CSS3 działa przy obciążeniu, ale działa bardzo wolno. Z tego powodu nie jest użyteczny.
Przejście CSS3 jest wystarczająco szybkie, ale nie animuje przy ładowaniu strony.

— Jens Törnell
źródło

@ rozwiązywanie problemów: prawie wszystko - patrz na przykład mysociety.org/2011/08/11/mobile-operators-breaking-content i robertnyman.com/2006/04/25/…

— NickFitz

2

Klatki kluczowe to osiągną i zapewnią najlepszą rezerwę, gdy animacje CSS3 nie są obsługiwane. Jak myślisz, dlaczego są zbyt wolne?

— zachleat

Cześć! Link jest teraz zepsuty i nie wiem, dokąd miał iść, więc czy ktoś może to naprawić!

— Linux4Life531

460

Państwo może uruchomić CSS animację na stronie obciążenia bez użycia JavaScript; wystarczy użyć klatek kluczowych CSS3 .

Spójrzmy na przykład ...

Oto demonstracja menu nawigacyjnego przesuwającego się na miejsce za pomocą tylko 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>

Rozwiń fragment kodu

Rozbicie go...

Ważnymi częściami są animacja klatki kluczowej, którą nazywamy slideInFromLeft...

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

... co w zasadzie mówi „na początku nagłówek będzie na całej szerokości poza lewą krawędzią ekranu, a na końcu będzie na swoim miejscu”.

Druga część nazywa tę slideInFromLeftanimację:

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

Powyżej jest wersja skrócona, ale tutaj jest pełna wersja dla przejrzystości:

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

Możesz robić różne ciekawe rzeczy, takie jak przesuwanie zawartości lub zwracanie uwagi na obszary.

Oto, co ma do powiedzenia W3C.

— Chris Spittles
źródło

20

Co powoduje, że ta strona ładuje się, a nie wcześniej?

— Rolf

2

Aby odpowiedzieć na powyższe pytanie, domyślnie wygląda na to, że animacja rozpoczyna się zero po zastosowaniu, bez opóźnienia. Istnieje dodatkowa właściwość, opóźnienie animacji, którą można ustawić, aby to kontrolować. Zobacz: w3.org/TR/css3-animations/#animation-delay-property

— Michael Davis

2

Aby mieć pewność, że animacja rozpocznie się po załadowaniu dokumentu, umieść kod animacji w arkuszu stylów poniżej elementu body lub znacznika stylu na dole elementu body.

— TaylorMac

@SuzanneEdelmanCreoconcept, zgodnie z moją wiedzą, IE9 nie obsługuje właściwości przejścia. Twoje opcje to JS lub pełna wdzięku degradacja.

— Chris Spittles,

1

Doskonała odpowiedź, pomogła mi w 2019 roku!

— Gosi

28

Niezbędne jest bardzo mało Javascript:

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

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

Wiem, że pytanie brzmiało „bez Javascript”, ale myślę, że warto zauważyć, że istnieje proste rozwiązanie obejmujące jedną linię Javascript.

Może to być nawet wbudowany Javascript, coś takiego:

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

To wszystko, co jest potrzebne w JavaScript.

— Rolf
źródło

2

Mała poprawka: <body onload = "document.body.setAttribute ('class', 'załadowany')">

— Ivan

1

Jeśli nie trzeba czekać na zdarzenie onLoad strony, wstaw ten kod przed tagiem </body>: <script type = "text / javascript"> document.body.setAttribute („klasa”, „załadowany”); </script>

— Ivan

7

Aby uniknąć zastąpienia istniejących bodyklas, użyj:document.body.classList.add('loaded)

— Wiaczesław Cotruta

1

Znalazłem document.body.className += " loaded";się być nieco mniej gadatliwy za dodanie do loadedklasy do istniejących klas.

— Pim Schaaf,

1

@PimSchaaf Dzięki za sugestię, to ma sens. Będę to teraz edytować. W dzisiejszych czasach możesz także używać classList, który jest nieco bardziej elegancki (ale mniej kompatybilny).

— Rolf

20

Wydaje mi się, że znalazłem sposób obejścia pytania dotyczącego OP - zamiast przejścia rozpoczynającego się na „obciążeniu” strony - stwierdziłem, że użycie animacji dla zaniku krycia ma ten sam efekt (szukałem to samo co OP).

Chciałem więc, aby treść ciała zmieniała kolor z białego (taki sam jak tło witryny) na czarny kolor tekstu przy ładowaniu strony - i pisałam tylko od poniedziałku, więc szukałam kodu rzeczy w stylu „on.load”, ale jeszcze nie znam JS - oto mój kod, który działał dla mnie dobrze.

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

I z jakiegokolwiek powodu, to nie działa .classtylko dla #id(przynajmniej nie u mnie)

Mam nadzieję, że to pomaga - jak wiem, ta strona bardzo mi pomaga!

— Lee John
źródło

6

Cóż, to trudne.

Odpowiedź brzmi „nie bardzo”.

CSS nie jest warstwą funkcjonalną. Nie ma świadomości tego, co się dzieje i kiedy. Służy po prostu do dodania warstwy prezentacyjnej do różnych „flag” (klas, identyfikatorów, stanów).

Domyślnie CSS / DOM nie zapewnia żadnego rodzaju stanu „wczytywania” do użycia przez CSS. Jeśli chciałbyś / mógłeś używać JavaScript, przydzielisz klasę bodylub coś w celu aktywacji CSS.

Biorąc to pod uwagę, możesz stworzyć hack do tego. Podam tutaj przykład, ale może on, ale nie musi dotyczyć twojej sytuacji.

Działamy przy założeniu, że „zamknięcie” jest „wystarczająco dobre”:

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

Oto fragment naszego arkusza stylów CSS:

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

Zakładamy również, że nowoczesne przeglądarki renderują progresywnie, więc nasz ostatni element będzie renderowany jako ostatni, więc ten CSS zostanie aktywowany na końcu.

— lisi
źródło

1

Podobne do rozwiązania @ Rolf, ale pomiń odniesienie do funkcji zewnętrznych lub zabawy z klasą. Jeśli krycie ma pozostać ustalone na 1 po załadowaniu, wystarczy użyć wbudowanego skryptu, aby bezpośrednio zmienić krycie poprzez styl. Na przykład

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

gdzie sytle CSS „fadein” jest zdefiniowane dla @ Rolfa, definiuje przejście i ustawia krycie do stanu początkowego (tj. 0)

jedynym problemem jest to, że nie działa to z elementami SPAN lub DIV, ponieważ nie mają one działającego zdarzenia onload

— użytkownik3907296
źródło

1

zacznij od najechania myszką na ciało niż zacznie się, gdy mysz po raz pierwszy poruszy się na ekranie, co jest w większości w ciągu sekundy po przybyciu, problem polega na tym, że odwróci się po wyjściu z ekranu.

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

to najlepsza rzecz, o której mogę myśleć: http://jsfiddle.net/faVLX/

pełny ekran: http://jsfiddle.net/faVLX/embedded/result/

Edytuj patrz komentarze poniżej:
To nie będzie działać na żadnym urządzeniu z ekranem dotykowym, ponieważ nie ma najechania kursorem, więc użytkownik nie zobaczy treści, dopóki jej nie dotknie. - Rich Bradshaw

— kod brody
źródło

Tak, sam to wymyśliłem. Jest to obejście, jeśli nic innego nie działa. Jeden głos za to.

— Jens Törnell

13

To okropny pomysł - na żadnym urządzeniu z ekranem dotykowym nie ma najechania kursorem, więc użytkownik nie zobaczy treści, dopóki jej nie dotknie.

— Rich Bradshaw,

1

CSS tylko z opóźnieniem 3s

kilka punktów do zabrania tutaj:

wiele animacji w jednym połączeniu
tworzymy animację oczekiwania, która opóźnia rzeczywistą (drugą w naszym przypadku).

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
źródło

0

Ok udało mi się uzyskać animację, gdy strona ładuje się przy użyciu tylko przejść css (tak jakby!):

Utworzyłem 2 arkusze stylów css: pierwszym jest sposób, w jaki chcę styl HTML przed animacją ... a drugi to sposób, w jaki strona ma zajmować się animacją.

Nie do końca rozumiem, jak to osiągnąłem, ale działa to tylko wtedy, gdy dwa pliki css (oba w nagłówku mojego dokumentu) są oddzielone przez javascript w następujący sposób.

Przetestowałem to w przeglądarce Firefox, safari i operze. Czasami animacja działa, czasem przeskakuje bezpośrednio do drugiego pliku css, a czasami strona ładuje się, ale nic nie jest wyświetlane (może to tylko ja?)

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

Oto link do mojej strony w toku: http://www.hankins-design.co.uk/beta2/test/index.html

Może się mylę, ale myślałem, że przeglądarki, które nie obsługują przejścia css, nie powinny mieć żadnych problemów, ponieważ powinny przejść bezpośrednio do drugiego pliku css bez opóźnienia lub czasu trwania.

Chciałbym poznać opinie na temat tego, jak przyjazna dla wyszukiwarek jest ta metoda. Z moim czarnym kapeluszem przypuszczam, że mógłbym wypełnić stronę słowami kluczowymi i zastosować opóźnienie o 9999 sekund.

Byłbym zainteresowany dowiedzieć się, jak wyszukiwarki radzą sobie z atrybutem opóźnienia przejścia i czy przy użyciu powyższej metody będą nawet widzieć linki i informacje na stronie.

Co ważniejsze, naprawdę chciałbym wiedzieć, dlaczego nie jest to spójne przy każdym ładowaniu strony i jak mogę to naprawić!

Mam nadzieję, że może to wygenerować opinie i opinie, jeśli nic więcej!

— Michael Walkling
źródło

0

Jeśli ktokolwiek miał problemy z zrobieniem dwóch przejść jednocześnie, oto co zrobiłem. Potrzebowałem tekstu przechodzącego od góry do dołu podczas ładowania strony.

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

Nie wiem, dlaczego próbowałem używać 2 deklaracji przejścia w 1 selektorze i (nie bardzo) sądzę, że użyje obu.

— s3c
źródło

0

Jeszcze prostsze rozwiązanie (nadal z javascript [jeden wiersz w linii]):

Użyj tego jako tagu ciała: Zauważ, że body.lub this.nie działało dla mnie. Tylko długo; querySelectorzezwolić na użycie classList.remove(Linux Chromium)

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

i dodaj ten wiersz do innych reguł css.

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

Zwróć uwagę, że może to mieć zastosowanie do krycia (zgodnie z żądaniem OP [innych plakatów]) po prostu przez użycie zamiast tego krycia jako wyzwalacza przejścia. (może nawet działać na dowolnej innej interpretacji css w ten sam sposób i możesz użyć wielu klas dla opóźnienia jawności między wyzwalaniem)

Logika jest taka sama. Wymuszaj brak transformacji ( :none !importantwe wszystkich elementach podrzędnych body.onloadi po załadowaniu dokumentu usuń klasę, aby wyzwolić wszystkie przejścia dla wszystkich elementów, jak określono w css.

PIERWSZA ODPOWIEDŹ PONIŻEJ (PATRZ EDYCJA POWYŻEJ, ABY ODPOWIEDŹ KRÓTKA)

Oto odwrotne rozwiązanie:

Utwórz układ html i ustaw css zgodnie z końcowym wynikiem (z całą potrzebną transformacją).
Ustaw właściwość przejścia według własnych upodobań
dodaj klasę (np .: waitload) do elementów, które chcesz przekształcić PO załadowaniu. Słowo kluczowe CSS ! WażneSłowo jest tutaj słowem kluczowym.
Po załadowaniu dokumentu użyj JS, aby usunąć klasę z elementów i rozpocząć transformację (i usuń przejście: brak zastąpienia).

Działa z wielokrotnym przejściem na wiele elementów. Nie próbowałem kompatybilności z różnymi przeglądarkami.

#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
źródło

-2

Nie bardzo, ponieważ CSS jest stosowany jak najszybciej, ale elementy mogą jeszcze nie zostać narysowane. Można zgadywać opóźnienie o 1 lub 2 sekundy, ale dla większości osób nie będzie to wyglądać dobrze, w zależności od szybkości Internetu.

Ponadto, jeśli chcesz na przykład coś zanikać, wymagałoby to CSS, który ukrywa dostarczaną treść. Jeśli użytkownik nie ma przejść CSS3, nigdy go nie zobaczy.

Polecam użycie jQuery (dla łatwości użytkowania + możesz dodać animację dla innych UA) i niektórych JS takich jak to:

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

Wraz z przejściami dodanymi w CSS. Ma to tę zaletę, że w razie potrzeby umożliwia łatwe korzystanie z animacji zamiast drugiego CSS w starszych przeglądarkach.

— Rich Bradshaw
źródło

17

Dlaczego ta odpowiedź została zaakceptowana? Naprawdę nie robi nic, o co zadane pytanie. Po prostu (i bardzo szybko, czasem niezauważalnie) element staje się niewidoczny, czeka niewielki ułamek sekundy (200 ms), a następnie natychmiast czyni go ponownie widocznym. To nie jest zanikanie, ostatnio sprawdziłem.

— VoidKing

Możesz dołączyć css przejścia na #id_to_fade in, choć zgadzam się, to nie jest tak jasne z odpowiedzi.

— Rich Bradshaw,

jak w, dodaj kolejny plik .css ({przejście: „nieprzezroczystość 2s”}) do wywołania jQuery? A może po prostu w twoim css? Mam wrażenie, że poczuję, że to głupie pytanie ...

— VoidKing

3

Jest OK - powinienem był naprawdę nagrać demo. W CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, także -moz-prefiksy.

— Rich Bradshaw,

2

To nie powinna być akceptowana odpowiedź, ponieważ korzystasz z klatek kluczowych.

— Eduardo Naveda,

animacja przejścia css3 przy ładowaniu?

Spójrzmy na przykład ...

Rozbicie go...