animacja przejścia css3 przy ładowaniu?

Czy możliwe jest użycie animacji przejścia CSS3 przy ładowaniu strony bez użycia Javascript?

Tego właśnie chcę, ale na stronie wczytuje się:

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

What I found so far

Author: BoltClock, 2011-07-24
Source

8 answers

Możesz uruchomić animację CSS podczas ładowania strony bez użycia JavaScript; wystarczy użyć klatek kluczowych CSS3.

Spójrzmy na przykład...

Oto demonstracja menu nawigacyjnego wsuwanego do miejsca za pomocą 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>

Rozbij to...

Ważną częścią jest animacja klatki kluczowej, którą nazywamy slideInFromLeft...

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

...który w zasadzie mówi: "w start, nagłówek będzie poza lewą krawędzią ekranu o pełną szerokość, a na końcu będzie na miejscu".

Druga część nazywa to slideInFromLeft animacja: 

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

Powyżej jest wersja skrócona, ale tutaj jest wersja słowna dla jasnoś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 w treści lub zwracanie uwagi na obszary.

Oto co W3C ma do powiedzenia.

 351
Author: Chris Spittles,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-05 06:24:39

Bardzo mało Javascript jest konieczne: 

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 brzmi "bez Javascript", ale myślę, że warto zwrócić uwagę, że istnieje łatwe rozwiązanie obejmujące jedną linię Javascript.

Może to być nawet wbudowany Javascript, coś w tym stylu: 

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

To wszystko JavaScript, który jest potrzebny.

 23
Author: Rolf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-15 18:29:00

Myślę, że znalazłem coś w rodzaju pracy na pytanie OP - zamiast przejścia początek ' na.load ' of the page-I found that using a animation for an opacity fade in had the same effect, (Szukałem tego samego co OP).

Więc chciałem, aby tekst tekstowy blakł z białego(tak samo jak tło strony) do czarnego koloru tekstu podczas ładowania strony - a ja koduję dopiero od poniedziałku, więc szukałem "na".load 'style thing code, but don' t know JS yet - so here to mój kod, który działał dobrze dla mnie. 

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

I z jakiegokolwiek powodu, to nie działa na .class tylko #id's(przynajmniej nie na moim)

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

 15
Author: Lee John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-19 14:17:35

Cóż, to jest trudne.

Odpowiedź brzmi "nie do końca".

CSS nie jest warstwą funkcjonalną. Nie ma żadnej świadomości tego, co się dzieje i kiedy. Jest używany po prostu do dodania warstwy prezentacyjnej do różnych "flags" (klas, identyfikatorów, Stanów).

Domyślnie CSS / DOM nie zapewnia żadnego rodzaju stanu" przy ładowaniu", którego CSS może używać. Gdybyś chciał / mógł używać JavaScript, przydzieliłbyś klasę body lub coś, co aktywowałoby CSS.

To jest said, możesz stworzyć hack do tego. Podam tutaj przykład, ale może on lub nie mieć zastosowania do twojej sytuacji.

Działamy przy założeniu, że "blisko" 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ą się stopniowo, więc nasz ostatni element będzie renderował jako ostatni, a więc ten CSS będzie aktywowany jako ostatni.

 5
Author: foxy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-03 17:06:11

Podobne do rozwiązania @ Rolf, ale pomiń odniesienie do zewnętrznych funkcji lub zabawy z klasą. Jeśli krycie ma pozostać stałe do 1 po załadowaniu, po prostu Użyj skryptu wbudowanego, aby bezpośrednio zmienić krycie za pomocą stylu. Na przykład 

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

Gdzie CSS sytle" fadein " jest zdefiniowany na @Rolf, definiując przejście i ustawiając nieprzezroczystość na stan początkowy (tzn. 0)

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

 1
Author: user3907296,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-04 15:34:16

Uruchom go z hover ciała niż rozpocznie się, gdy mysz po raz pierwszy porusza się na ekranie, co jest głównie w ciągu sekundy po przybyciu, problem jest tutaj, że będzie odwrócony, gdy poza ekranem.

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

To najlepsza rzecz, jaką mogę wymyślić: http://jsfiddle.net/faVLX/

Fullscreen: http://jsfiddle.net/faVLX/embedded/result/

Edytuj Zobacz komentarze poniżej:
To nie zadziała na żadnym urządzeniu z Ekranem dotykowym, ponieważ nie ma najedź kursorem, aby użytkownik nie zobaczył zawartości, chyba że dotknie jej. - Rich Bradshaw

 1
Author: beardhatcode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-21 15:10:51

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

Utworzyłem 2 arkusze stylów css: pierwszy to sposób, w jaki chcę, aby html był stylizowany przed animacją... a po drugie, jak chcę, aby strona wyglądała po wykonaniu animacji.

Nie do końca rozumiem, jak udało mi się to osiągnąć, ale działa to tylko wtedy, gdy dwa pliki css (oba w nagłówku mojego dokumentu) są oddzielone jakimś javascript jako / align = "left" /

Przetestowałem to z Firefoksem, safari i operą. Czasami animacja działa, czasami przeskakuje prosto do drugiego pliku css, a czasami strona wydaje się ładować, ale nic się nie wyświetla (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 prac w toku: http://www.hankins-design.co.uk/beta2/test/index.html

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

Jestem zainteresowany poglądami na to, 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 9999s na jej nieprzezroczystości.

Chciałbym wiedzieć, jak Wyszukiwarki radzą sobie z atrybutem transition-delay i czy przy użyciu powyższej metody widzą nawet linki i informacje na stronie.

Ważniejsze I naprawdę chciałbym wiedzieć, dlaczego nie jest to spójne za każdym razem, gdy strona ładuje się i jak Mogę to naprawić!

Mam nadzieję, że to może wygenerować kilka poglądów i opinii, jeśli nic innego!

 0
Author: Michael Walkling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-18 20:32:29

Nie bardzo, ponieważ CSS jest stosowany tak szybko, jak to możliwe, ale elementy mogą nie być jeszcze rysowane. Można odgadnąć opóźnienie 1 lub 2 sekund, ale to nie będzie wyglądać dobrze dla większości ludzi, w zależności od szybkości ich Internetu.

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

Polecam używanie jQuery ( dla łatwości obsługi + można chciałbym dodać animację dla innych UAs) i jakieś JS takie: 

$(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. Zaletą tego rozwiązania jest możliwość łatwego używania programu animate zamiast drugiego CSS w starszych przeglądarkach, jeśli jest to wymagane.

 -3
Author: Rich Bradshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-24 07:38:39