8 einfache CSS3 Transitions (Übergänge/Überblendungen) erstellen

8 tolle CSS3 Übergänge, welche den Leser so richtig beeindrucken

CSS3-Transitions - 8 Beispiele

CSS3 bietet dem Nutzer eine Vielzahl von Möglichkeiten, um verblüffende und wunderschöne »Transitions« (Übergänge und Überblendungen) zu erstellen und in HTML-Webseiten einzubauen.

Dass mit CSS3 interessante Animationen und Effekte ohne Javascript erstellt werden können, ist schon lange bekannt. Dabei werden HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern animiert. Die dabei erreichten Animationen wirken mit :hover oder :focus fast wie ein Schalter: an, aus, an, aus.

Begriffsbestimmung

Eine Transition ist als ein fließender Übergang oder eine langsame Überblendung einer CSS-Eigenschaft auf einer Zeitachse zu verstehen. Wo Sie bislang bei einem Mouseover eine Farbe wie auf Knopfdruck ändern konnten, geschieht dies über eine Transition in einer langsamen Verwandlung.

8 interessante und coole CSS3 Transitions

Auf der Webseite Webdesigner Depot habe ich ein interessantes Tutorial zur Erstellung von CSS3-Animationen gefunden. Eindrucksvoll wird dabei gezeigt, wie Sie die CSS3 Transitions für beeindruckende und schicke Hover-Effekte nutzen können.

Der Einsatz ist in den folgenden 8 Demobeispielen sehr einfach, die einzelnen Eigenschaften intuitiv und sicher der leichteste Einstieg in den Bereich der animierten Inhalte.

HTML-Seite




    


    

CSS-Box Grundgerüst


8 Demobeispiele mit den entsprechden CSS-Anweisungen

#1 3D Shadow/3D Schatten – Demobeispiel

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

#2 Change Color/Farbwechsel – Demobeispiel

.color:hover
{
        background:#53a7ea;
}

#3 Fade In/Einblendung – Demobeispiel

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

#4 Grow/Wachsen-Größer werden – Demobeispiel

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

#5 Inset Border/Rahmen-Einblendung – Demobeispiel

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}

#6 Rotate/Drehen – Demobeispiel

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

#7 Shrink/Schrumpfen-Verkleinern – Demobeispiel

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

#8 Square To Circle/Verwandlung in Kreis – Demobeispiel

.circle:hover
{
        border-radius:50%;
}

Tweet about this on TwitterShare on Google+3Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *