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



BeitragVerfasst: Fr 09.10.15 13:00 
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 heightwidthmachen) 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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: So 11.10.15 10:37 
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 Threadstarter
Hält's aus hier
Beiträge: 12



BeitragVerfasst: So 11.10.15 11:33 
Ich habe es jetzt so probiert und es geht nicht:
ausblenden HTML-Dokument
1:
<img src="Bild1.png" id="B1">					


ausblenden Cascading Style Sheet
1:
2:
3:
4:
5:
6:
#B1 {
animation-duration2s;
animation-delay4s;
animation-name: example;
animation-iteration-count3;
}


Woran kann es liegen?
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: So 11.10.15 14: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.
WebLover Threadstarter
Hält's aus hier
Beiträge: 12



BeitragVerfasst: So 11.10.15 15:22 
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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Administrator
Beiträge: 10129
Erhaltene Danke: 1231

W2k .. W7pro .. W10ent
TP3 .. D7pro .. D10.2CE
BeitragVerfasst: So 11.10.15 15:45 
Moin!

user profile iconWebLover hat folgendes geschrieben Zum zitierten Posting springen:
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 Threadstarter
Hält's aus hier
Beiträge: 12



BeitragVerfasst: So 11.10.15 16:16 
Ich habe es jetzt so probiert, aber es klappt einfach nicht :( :
ausblenden Cascading Style Sheet
1:
2:
3:
4:
@-moz-keyframes xd  {
animation-duration2s;
animation-delay4s;
}


ausblenden Cascading Style Sheet
1:
2:
3:
4:
5:
#p1  {
animation-duration2s;
animation-delay4s;
animation-name: xd;
}


Wo ist nun der Fehler? Ich verwende Firefox?
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: So 11.10.15 17: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:
ausblenden volle Höhe 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 Threadstarter
Hält's aus hier
Beiträge: 12



BeitragVerfasst: So 11.10.15 18:53 
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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Administrator
Beiträge: 10129
Erhaltene Danke: 1231

W2k .. W7pro .. W10ent
TP3 .. D7pro .. D10.2CE
BeitragVerfasst: Mo 12.10.15 10:23 
Moin!

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

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.
FinnO
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1327
Erhaltene Danke: 121

Mac OSX, Arch
TypeScript (Webstorm), Kotlin, Clojure (IDEA), Golang (VSCode)
BeitragVerfasst: Di 13.10.15 14:14 
Praktischer ist hier oft auch caniuse.com

Für diesen Beitrag haben gedankt: Christian S.
WebLover Threadstarter
Hält's aus hier
Beiträge: 12



BeitragVerfasst: Di 13.10.15 19:35 
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.