3 Bilder sollen aufpoppen

WebLover · Hält's aus hier Beiträge: 12

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

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

Dafür sind CSS-Animationen geeignet. Beispiele gibt es hier: www.w3schools.com/css/css3_animations.asp

In deinem Fall kannst du die height-Property animieren und ggf. noch ein Delay einbauen.

WebLover · Hält's aus hier Beiträge: 12

Ich habe es jetzt so probiert und es geht nicht:

markieren

HTML-Dokument

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

markieren

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 · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

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.

WebLover · Hält's aus hier Beiträge: 12

Natoll

. 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?

Narses · Verfasst: 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? :lupe:

Du verweist mit dem Namen "example" darauf, hast aber den Code nicht angegeben. :nixweiss:

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

WebLover · Hält's aus hier Beiträge: 12

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

:

markieren

Cascading Style Sheet

1:
2:
3:
4:

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

markieren

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 · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

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:

markieren

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>

WebLover · Hält's aus hier Beiträge: 12

Vielen vielen Dank. Es klappt jetzt super, doch jetzt nur noch eine Frage :oops:

Ich der Schule verwenden wir nicht Firefox sondern den normalen Explorer und da muss die Internetseite auch funktionieren. Auf meinem PC jedoch auch. Gibt es da irgendeine Möglichkeit?

Narses · Verfasst: Mo 12.10.15 11:23

Moin!

Wie wäre es mal mit selbst nachsehen? :les:

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

FinnO · Verfasst: Di 13.10.15 15:14

Praktischer ist hier oft auch caniuse.com

WebLover · Hält's aus hier Beiträge: 12

Vielen Dank. Ich habe es jetzt mit @-moz-keyframes probiert. Es klappt sowohl in Mozilla Firefox und im Explorer. Warum ich mir unsicher bin ist, dass wenn ich im alt Tag z.B. beim Image etwas eingebe, es azf der Webseite auftaucht, wenn man die Maus darüber beweget. Deswegen bin ich mir etwas unsicher.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme