Page Opening Animation/Transition

[Enzario]

Moin epvp'ers,

und zwar stellt sich mir folgende Frage:
Ich hab wollte das sobald man auf meine Page geht eine loading Animation aus meinem Monogram erstellt und aus einzelnen Elementen des Monograms sollen dann Elemente für das Grundlayout darstellen.

Ich hab dafür mal eine Concept Gif erstellt, ist so etwas möglich? Und wenn ja, wie?

Es ist für ein Portfolio und innerhalb des Rahmens soll dann der Content der Page dargestellt werden. Die zwei Striche werden links zu einem Menü aus drei Strichen. das "gc" wird oben links zum Logo mit einem getippten Text mit Delay um die aktuelle Page anzuzeigen.

Hoffe ihr könnt mir helfen

[False]

Ja ist mit CSS Animationen möglich.

[Enzario]

Originally Posted by False

Ja ist mit CSS Animationen möglich.

Ein Tipp wonach ich googeln muss?
HTML & CSS Basic's hab ich drauf, den rest würd ich mir dann versuchen anzueignen.

[False]

Wenn du nach CSS Animation/transition suchst solltest du eigentlich schon alles finden.

[Icetea]

Originally Posted by Enzario

Ein Tipp wonach ich googeln muss?
HTML & CSS Basic's hab ich drauf, den rest würd ich mir dann versuchen anzueignen.

Such einfach mal nach CSS3 Keyframes. Dazu solltest du eigentlich genügend Anleitungen zum Erstellen von Animationen ganz ohne JavaScript finden.

edit: Sehe gerade, dass False dir die Antwort bereits vorher gegeben hatte.

Liebe Grüße,
Icetea'

[Enzario]

Perfekt, danke Leute
Dann setz ich mich mal ran, ich komm bei fragen nochmal drauf zurück

Eine frage bleibt jedoch noch, wenn ich das über CSS3 Animations/Keyframes löse, dann nutzt er doch ein Bild, kann der Border und die zusätzlichen Elemente dann responsive sein?

[Icetea]

Originally Posted by Enzario

Eine frage bleibt jedoch noch, wenn ich das über CSS3 Animations/Keyframes löse, dann nutzt er doch ein Bild, kann der Border und die zusätzlichen Elemente dann responsive sein?

Nein, du arbeitest nicht automatisch mit einem Bild wenn du das über CSS3 Keyframes löst. Habe hier mal einen Beispiel Codeschnipsel für dich, welchen du einfach bei JSFiddle mal ausprobieren kannst um das Ganze nach und nach zu verstehen.

 Beispiel Codeschnipsel

@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="#">Register</a>
  <a href="#">Download</a>
  <a href="#">Contact</a>
</header>

Liebe Grüße,
Icetea'

[Enzario]

Originally Posted by Icetea'

Nein, du arbeitest nicht automatisch mit einem Bild wenn du das über CSS3 Keyframes löst. Habe hier mal einen Beispiel Codeschnipsel für dich, welchen du einfach bei JSFiddle mal ausprobieren kannst um das Ganze nach und nach zu verstehen.

 Beispiel Codeschnipsel

@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="#">Register</a>
  <a href="#">Download</a>
  <a href="#">Contact</a>
</header>

Liebe Grüße,
Icetea'

Mega, vielen Dank dafür!!

Ich meld mich