Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)

<div Klasse="Zeile">
  <p>Klicken Sie auf jede Eingabe.</p>
</div>
<div Klasse="Zeile">
  <span>
    <input class="basic-slide" id="name" type="text" placeholder="Ihr bester Name" /><label for="name">Name</label>
  </span>
  <span>
    <input class="basic-slide" id="email" type="text" placeholder="Ihre bevorzugte E-Mail" /><label for="email">E-Mail</label>
  </span>
  <span>
    <input class="basic-slide" id="phone" type="text" placeholder="Sie können uns vertrauen" /><label for="phone">Telefon</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="clean-slide" id="age" type="text" placeholder="Holen Sie sich den Highscore!" /><label for="age">Alter</label>
  </span>
  <span>
    <input class="clean-slide" id="height" type="text" placeholder="Anzahl der Absätze" /><label for="height">Größe</label>
  </span>
  <span>
    <input class="clean-slide" id="weight" type="text" placeholder="Lüg ruhig" /><label for="weight">Gewicht</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="gate" id="class" type="text" placeholder="Wizard!" /><label for="class">Klasse</label>
  </span>
  <span>
    <input class="gate" id="element" type="text" placeholder="Fünf zur Auswahl" /><label for="element">Element</label>
  </span>
  <span>
    <input class="gate" id="move" type="text" placeholder="Geheimer Buchangriff!" /><label for="move">Bewegen</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="skinny" id="english" type="text" placeholder="Sprechen Sie es?" /><label for="english">Englisch</label>
  </span>
  <span>
    <input class="skinny" id="burger" type="text" placeholder="Ein Royale mit Käse?" /><label for="burger">Burger</label>
  </span>
  <span>
    <input class="skinny" id="wallet" type="text" placeholder="Böses Arschloch" /><label for="wallet">Geldbörse</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="slide-up" id="card" type="text" placeholder="Gib mir Geld!" /><label for="card">Kreditkarte</label>
  </span>
  <span>
    <input class="slide-up" id="expires" type="text" placeholder="Monat Tag, Jahr" /><label for="expires">Läuft ab</label>
  </span>
  <span>
    <input class="slide-up" id="security" type="text" placeholder="Public" /><label for="security">Sicherheitscode</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="card-slide" id="knock" type="text" placeholder="Wer ist da?" /><label for="knock">Klopf klopf</label>
  </span>
  <span>
    <input class="card-slide" id="max" type="text" placeholder="Max wer?" /><label for="max">Max</label>
  </span>
  <span>
    <input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><label for="out">Karte voll ausgeschöpft ;)</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="swing" id="artist" type="text" placeholder="BO$$" /><label for="artist">Künstler</label>
  </span>
  <span>
    <input class="swing" id="song" type="text" placeholder="Ist mir scheißegal" /><label for="song">Lied</label>
  </span>
  <span>
    <input class="swing" id="eyes" type="text" placeholder="Verrückt" /><label for="eyes">Augen</label>
  </span>
</div>
<div Klasse="Zeile">
  <span>
    <input class="balloon" id="state" type="text" placeholder="Flüssig, fest, gasförmig..." /><label for="state">Staat</label>
  </span>
  <span>
    <input class="balloon" id="planet" type="text" placeholder="Wahrscheinlich Erde" /><label for="planet">Planet</label>
  </span>
  <span>
    <input class="balloon" id="galaxy" type="text" placeholder="Milchstraße?" /><label for="galaxy">Galaxie</label>
  </span>
</div>

@import "Kompass/css3";
 
@import-URL (https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
 
* {
  Box-Größe: Rahmenbox;
}
html,
Körper {
  Überlauf-x: versteckt;
  Schriftfamilie: „Open Sans“, serifenlos;
  Schriftstärke: 300;
  Farbe: #fff;
  Hintergrund: #efefef;
}
@mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
    Position: relativ;
    Z-Index: 1;
 
    &:vor {
        Position: absolut;
        Inhalt: "";
        Anzeige: Block;
        oben: 0;
        links: -5000px;
        Höhe: 100%;
        Breite: 15000px;
        z-Index: -1;
        @Inhalt;
    }
}
.Reihe {
  maximale Breite: 800px;
  Rand: 0 automatisch;
  Polsterung: 60px 30px;
  Hintergrund: #032429;
  @include epic-sides() {Hintergrund: erben;}
  Textausrichtung: zentriert;
  
  &:erstes-Kind {
    Polsterung: 40px 30px;
  }
  &:n-tes-Kind(2),
  &:n-tes-Kind(8),
  &:n-tes-Kind(10){
    Hintergrund: #134A46;
  }
  &:n-tes-Kind(3),
  &:n-tes-Kind(7) {
    Hintergrund: #377D6A;
  }
  &:n-tes-Kind(4),
  &:n-tes-Kind(6) {
    Hintergrund: #7AB893;
  }
  &:n-tes-Kind(5) {
    Hintergrund: #B2E3AF;
  }
  
  Spanne {
    Position: relativ;
    Anzeige: Inline-Block;
    Rand: 30px 10px;
  }
}
.grundlegende Folie {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 70px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Hintergrund: #7AB893;
    Übergang: alle 0,3 s sanft ein- und ausfahren;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
  }
}
.basic-slide:Fokus,
.basic-slide:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  Rahmen-oben-links-Radius: 0;
  Rahmen unten links-Radius: 0;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    transformieren: übersetzenX(-100%);
  }
}
.saubere Folie {
  Position: relativ;
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 60px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    transformieren: übersetzenX(0);
    oben: 0;
    links: 0;
    unten: 0;
    Polsterung: 13px 15px;
    Schriftgröße: 11px;
    Schriftstärke: 700;
    Texttransformation: Großbuchstaben;
    Farbe: #032429;
    Textausrichtung: links;
    Textschatten: 0 1px 0 rgba(255,255,255,.4);
    Übergang: alle 0,3 s Ein- und Ausblenden, Farbe 0,3 s Ausblenden;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Überlauf: versteckt;
    
    &:nach {
      Inhalt: "";
      Position: absolut;
      oben: 0;
      rechts: 100%;
      unten: 0;
      Breite: 100 %;
      Hintergrund: #7AB893;
      z-Index: -1;
      transformieren: übersetzen(0);
      Übergang: alle 0,3 s sanft ein- und ausfahren;
      Rahmen oben links – Radius: 3px;
      Rahmen unten links – Radius: 3px;
    }
  }
}
.clean-slide:focus,
.clean-slide:active {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  Rahmen-oben-links-Radius: 0;
  Rahmen unten links-Radius: 0;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    Farbe: #fff;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    transformieren: übersetzenX(-100%);
    
    &:nach {
      transformieren: übersetzen (100 %);
    }
  }
}
.Tor {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 65px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Hintergrund: #7AB893;
    Übergang: alle 0,4 s sanftes Ein- und Aussteigen;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Transform-Origin: links unten;
    Z-Index: 99;
    
    &:vor,
    &:nach {
      Inhalt: "";
      Position: absolut;
      oben: 0;
      rechts: 0;
      unten: 0;
      links: 0;
      Rahmenradius: 3px;
      Hintergrund: #377D6A;
      Transform-Origin: links unten;
      Übergang: alle 0,4 s sanftes Ein- und Aussteigen;
      Zeigerereignisse: keine;
      z-Index: -1;
    }
    &:vor {
      Hintergrund: rgba(3,36,41,.2);
      z-Index: -2;
      rechts: 20%;
    }
  }
}
span:n-tes-Kind(2) .gate {
  Texteinzug: 85px;
}
span:nth-child(2) .gate:fokus,
span:n-tes-Kind(2) .gate:aktiv{
  Texteinzug: 0;
}
.gate:fokus,
.gate:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  Rahmen oben rechts – Radius: 3px;
  Rahmen unten rechts – Radius: 3px;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    transformieren: drehen (-66 Grad);
    Rahmenradius: 3px;
    
    &:vor {
      transformieren: drehen (10 Grad);
    }
  }
}
.schlank {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 75px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    transformieren: übersetzenX(0);
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Übergang: alle 0,3 s sanft ein- und ausfahren;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Überlauf: versteckt;
 
    &:vor,
    &:nach {
      Inhalt: "";
      Position: absolut;
      rechts: 0;
      links: 0;
      z-Index: -1;
      Übergang: alle 0,3 s sanft ein- und ausfahren;
    }
    &:vor {
      // Dünnes Stück hier
      oben: 5px;
      unten: 5px;
      Hintergrund: #377D6A; // ändern Sie dies in #134A46
      Rahmen oben links – Radius: 3px;
      Rahmen unten links – Radius: 3px;
    }
    &:nach {
      oben: 0;
      unten: 0;
      Hintergrund: #377D6A;
    }
  }
}
.skinny:fokus,
.skinny:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    transformieren: übersetzenX(-100%);
    
    &:nach {
      transformieren: übersetzenX(100%);
    }
  }
}
.nach oben schieben {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 80px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    transformieren: übersetzenX(0);
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Übergang: alle 0,3 s sanft ein- und ausfahren;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Überlauf: versteckt;
 
    &:vor,
    &:nach {
      Inhalt: "";
      Position: absolut;
      rechts: 0;
      links: 0;
      z-Index: -1;
      Übergang: alle 0,3 s sanft ein- und ausfahren;
    }
    &:vor {
      // Dünnes Stück hier
      oben: 6px;
      links: 5px;
      rechts: 5px;
      unten: 6px;
      Hintergrund: #377D6A; // ändern Sie dies in #134A46
    }
    &:nach {
      oben: 0;
      unten: 0;
      Hintergrund: #377D6A;
    }
  }
}
span:n-tes-Kind(1) .nach-oben-schieben {
  Texteinzug: 105px;
}
span:n-tes-Kind(3) .nach-oben-schieben {
  Texteinzug: 125px;
}
Spanne: n-tes Kind (1) .slide-up: Fokus,
Spanne: n-tes Kind (1) .slide-up: aktiv,
Spanne: n-tes Kind (3) .slide-up: Fokus,
span:nth-child(3) .slide-up:active {
  Texteinzug: 0;
}
.nach oben schieben: Fokus,
.nach oben schieben:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    transformieren: verschiebeY(-100%);
 
    &:vor {
      Rahmenradius: 5px;
    }
    &:nach {
      transformieren: übersetzenY(100%);
    }
  }
}
.Kartenfolie {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 115px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Block;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Hintergrund: #7AB893;
    Übergang: alle 0,3 s sanft ein- und ausfahren;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Transform-Origin: rechts Mitte;
    transformieren: Perspektive (300px) Skalierung X (1) Drehen Y (0 Grad);
  }
}
span:n-tes-Kind(2) .card-slide {
  Texteinzug: 55px;
}
span:n-tes-Kind(3) .card-slide {
  Texteinzug: 150px;
}
span:nth-child(2) .card-slide:fokus,
span:nth-child(2) .card-slide:active,
span:nth-child(3) .card-slide:fokus,
span:nth-child(3) .card-slide:active {
  Texteinzug: 0;
}
.card-slide:fokus,
.card-slide:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  Rahmen-oben-links-Radius: 0;
  Rahmen unten links-Radius: 0;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    transformieren: Perspektive (600 Pixel), X-Verschiebung (-100 %), Y-Drehung (80 Grad);
  }
}
.schwingen {
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 60px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 10px 15px;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Hintergrund: #7AB893;
    Rahmen oben links – Radius: 3px;
    Rahmen unten links – Radius: 3px;
    Transform-Ursprung: 2px 2px;
    transformieren: drehen(0);
    // Es sollte einen besseren Weg geben
    Animation: Zurückschwingen 0,4 s 1 Ein- und Ausschwingen;
  }
}
@keyframes schwingen {
  0% {
    transformieren: drehen(0);
  }
  20% {
    transformieren: drehen (116 Grad);
  }
  40 % {
    transformieren: drehen (60 Grad);
  }
  60 % {
    transformieren: drehen (98 Grad);
  }
  80 % {
    transformieren: drehen (76 Grad);
  }
  100 % {
    transformieren: drehen (82 Grad);
  }
}
@keyframes schwingen zurück {
  0% {
    transformieren: drehen (82 Grad);
  }
  100 % {
    transformieren: drehen(0);
  }
}
.swing:Fokus,
.swing:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  Rahmen-oben-links-Radius: 0;
  Rahmen unten links-Radius: 0;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    Animation: Schwung 1,4 s 1 Ein- und Ausschwingen;
    transformieren: drehen (82 Grad);
  }
}
.Ballon {
  // Wie vorgeschlagen von https://twitter.com/dbox/status/365888496486985728
  Anzeige: Inline-Block;
  Breite: 215px;
  Polsterung: 10px 0 10px 15px;
  Schriftfamilie: „Open Sans“, sans;
  Schriftstärke: 400;
  Farbe: #377D6A;
  Hintergrund: #efefef;
  Rand: 0;
  Rahmenradius: 3px;
  Umriss: 0;
  Texteinzug: 60px; // Beliebig.
  Übergang: alle 0,3 s sanft ein- und ausfahren;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #efefef;
    Texteinzug: 0;
    Schriftstärke: 300;
  }
 
  + Etikett {
    Anzeige: Inline-Block;
    Position: absolut;
    oben: 8px;
    links: 0;
    unten: 8px;
    Polsterung: 5px 15px;
    Farbe: #032429;
    Schriftgröße: 11px;
    Schriftstärke: 700;
    Texttransformation: Großbuchstaben;
    Textschatten: 0 1px 0 rgba(19,74,70,0);
    Übergang: alle 0,3 s sanft ein- und ausfahren;
    Rahmenradius: 3px;
    Hintergrund: rgba(122,184,147,0);
    
    &:nach {
      Position: absolut;
      Inhalt: "";
      Breite: 0;
      Höhe: 0;
      oben: 100 %;
      links: 50%;
      Rand links: -3px;
      Rahmen links: 3px durchgehend transparent;
      Rahmen rechts: 3px durchgehend transparent;
      Rahmen oben: 3px durchgezogen rgba(122,184,147,0);
      Übergang: alle 0,3 s sanft ein- und ausfahren;
    }
  }
}
.Ballon:Fokus,
.Ballon:aktiv {
  Farbe: #377D6A;
  Texteinzug: 0;
  Hintergrund: #fff;
  
  &::-webkit-Eingabeplatzhalter {
    Farbe: #aaa;
  }
  + Etikett {
    Farbe: #fff;
    Textschatten: 0 1px 0 rgba(19,74,70,.4);
    Hintergrund: rgba(122,184,147,1);
    transformieren: übersetzenY(-40px);
    
    &:nach {
      Rahmen oben: 4px durchgezogen rgba(122,184,147,1);
    }
  }
}