Entwickler-Ecke :: Thema anzeigen - 3 Bilder sollen aufpoppen

WebLover - Fr 09.10.15 14:00
Titel: 3 Bilder sollen aufpoppen

Hallo ich Lieben. Ich bin neu hier auf dem Forum und habe eine Frage. Ich muss eine Webseite schreiben und habe schonmal 3 Bilder eingefügt. Außerdem habe ich eine CSS Datei mit der HTML Datei verbunden.

Zu meinem Problem:
Ich möchte, dass die 3 Bilder nacheinander (erst das Linke, 1 Sekunde später das mittlere und nach 1 Sekunde das rechte Bild) aufploppen.
Sie sollen erst nicht sichtbar sein, wenn sie erscheinen erst ein bisschen größen, dann werden sie kleiner (das würde ich mit height, widthmachen) und zum Schluss sind sie normal. Das soll auch mit den anderen 2 passieren. Könnt ihr verstehen, was ich meine? So ein modernes aufpoppen der Bilder.

Ihr könntet mir das ja nur an einem Beispiel erklären, den Rest mache ich dann, nur damit ich weiß wie.
Mit freundlichen Grüßen :)

WebLover - So 11.10.15 12:33

Ich habe es jetzt so probiert und es geht nicht:

HTML-Dokument

1:	<img src="Bild1.png" id="B1">

Cascading Style Sheet

1:
2:
3:
4:
5:
6:

#B1 {
animation-duration: 2s;
animation-delay: 4s;
animation-name: example;
animation-iteration-count: 3;
}

Woran kann es liegen?

jfheins - So 11.10.15 15:42

Ich habe es jetzt auch so probiert, und es geht.

Es wird demzufolge wahrscheinlich an den Zeilen liegen, die du nicht in deinem Posting enthalten sind.
Ein minimales Beispiel ist grundsätzlich gut, aber problematisch wenn dann doch etwas fehlt. Schau dir vielleicht den obigen Link nochmal genau an, vielleicht hast du ja etwas vergessen.

Narses - So 11.10.15 16:45

Moin!

WebLover hat folgendes geschrieben :

Ich verstehe aber nicht, was da noch fehlen soll, die Dauer der Animationen sind eingestellt. Das alles ist mit dem Bild verbunden, woran kann es jetzt noch liegen?

Wo ist denn die @keyframes-Rule [http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp]? :lupe: Du verweist mit dem Namen "example" darauf, hast aber den Code nicht angegeben. :nixweiss:

cu
Narses

WebLover - So 11.10.15 17:16

Ich habe es jetzt so probiert, aber es klappt einfach nicht :( :

Cascading Style Sheet

1:
2:
3:
4:

@-moz-keyframes xd  {
animation-duration: 2s;
animation-delay: 4s;
}

Cascading Style Sheet

1:
2:
3:
4:
5:

#p1  {
animation-duration: 2s;
animation-delay: 4s;
animation-name: xd;
}

Wo ist nun der Fehler? Ich verwende Firefox?

jfheins - So 11.10.15 18:09

BITTE poste bei solchen Problemen mehr Code.
Wenn das dein gesamter Code ist, dann kann schon nicht funktionieren weil des umschließende HTML fehlt. So müssen wir im Grunde hellsehen oder uns den Rest vom Code denken. Und wenn ich mir beim Rest etwas hindenke, dann funktioniert alles. :nixweiss:
Und "klappt nicht" ist auch eine dürftige Fehlerbeschreibung, aber ich interpretiere daraus mal sowas wie

Zitat:

Das Bild wird anfangs zwar normal angezeigt, allerdings tut sich nach den 4 Sekunden nichts. In der Fehlerkonsole meine Webbrowsers finden sich ebenfalls keine Einträge. Ich verwende eine neuere Firefoxversion als 16.0, die in dem referenzierten Link als Minimalversion angegeben ist, nämlich Version 41.

Also hier mal ein kleines - aber komplettes - Beispiel, das bei mir funktioniert. Alles in einer Datei:

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stylesheet in einem style-Element definieren</title>
    <style>
    @keyframes example {
      from { transform: scale(0); }
      to { transform: scale(1); }
    }

    img {
      width: 300px;
      transform: scale(0);
      animation-duration: 2s;
      animation-name: example;
      animation-fill-mode: forwards;
    }
    #B1 {
      animation-delay: 0s;
    }
    #B2 {
      animation-delay: 1s;
    }
  
    </style>
  </head>
  <body>
    <img src="Bild1.png" id="B1">
    <img src="Bild1.png" id="B2">
  </body>
</html>

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!