Design, Interaction, Code & Teaching

012 CSS3-Transitions und Hover-Effekte – CSS3-Animations Part I

css3-2d-3d-transition

Transition bedeutet Übergang – eigentlich ein Dauerzustand in unserem Leben. Auch wenn es verlockend ist, über Transitions zu philosophieren – ich möchte euch Transitions im Interaction Design nahebringen.

Transitions kennen wir aus dem Film – der Übergang von einer Szene zur nächsten. Im Interaction Design meinen wir mit Transitions die Bewegung von Interface-Elementen. Ein Beispiel ist die Navigation auf dem iPhone: Der User blättert zwischen den Screens. Die Screens sliden nach links – nicht zu schnell, nicht zu langsam, ohne irritierendes Zittern mit einer weichen, gleitenden Bewegung. Die perfekte Choreografie zwischen der Bewegung und dem Screen macht diese Transition zu einer genussvollen Erfahrung. Beobachtet Mal, wie gerne Kinder auf einem iPad blättern!

Mit CSS3 könnt ihr Transitions einfach und elegant auch für Webseiten kreieren.

Was ist eine Transition?

Transitions lehnen sich an physische Metaphern an wie Beschleunigen, Abbremsen, Schieben, Ziehen oder Blättern. Mit guten Transitions fühlt sich das Interface richtig an, der User navigiert kontrolliert und sicher. Transitions können als Branding-Element wie bei Apple definiert werden und verbessern die User-Expierence.

Diese Flipped-Classroom-Serie erklärt, wie ihr mit CSS3 Transitions und Animationen realisiert. Der erste Teil nimmt die CSS-Transition-Eigenschaft genau unter die Lupe anhand von Beispielen wie ein einfaches Menü, Effekte für Bildunterschriften bis zu komplexeren zeitversetzten Transitions. In den nächsten Teilen geht es weiter mit CSS3-Transformations und CSS3-Keyframe-Animations.

    CSS3-Transitions und Hover-Effekte

  1. Browser-Support von CSS3-Transitions
  2. Transition im Code definieren
  3. Transition-Eigenschaft verstehen
  4. Beispiel: Transition – vom Button bis zum DropDown-Menü
  5. Beispiel: RollOver-Effekte für Bildunterschriften
  6. Beispiel: Komplexe Transition mit der Delay-Eigenschaft
  7. Fazit

Demo & Code

css3-transitiion-menu
Demo Menüs mit CSS3-Transitions

css3-transition-image-caption
Demo Bildunterschriften mit CSS3-Transitions

css3-transition-complex-delay
Demo komplexe Transition mit Delay

Download Code

Browser-Support von CSS3-Transitions

CSS3 wird von allen aktuellen Browser-Versionen außer dem Internet Explorer 9 unterstützt. Zum Glück hat Microsoft bereits den Explorer Version 10 mit CSS3-Features veröffentlicht. Unterstützt der Browser keine CSS3-Transitions, werden die CSS-Eigenschaften ohne Animation direkt auf die HTML-Elemente angewandt.
Für alte Browser bleibt nur der Weg Javascript zu programmieren zum Beispiel mit jQuery. Aber für mobile Devices wie das iPhone, iPad und auch Android sind CSS3-Animationen performativer und deshalb gegenüber Javascript vorzuziehen.

CSS3-Transition im Code definieren

Eine Transition wird mit zwei Zuständen definiert, zwischen denen eine Animation abläuft. Der Start muss über ein Ereignis ausgelöst werden – im Interaction Design nennt man das ein Event triggern – das Event in den Beispielen ist ein MouseOver über ein HTML-Element, das mit dem Pseudo-Selector Hover gesetzt wird.

  • Zustand A: Start

    Transition-Eigenschaft mit mindestens zwei Werten für den Start definieren, nämlich eine CSS-Eigenschaft und die Zeit:

    1
    2
    3
    4
        .button {
            background: white;
            -web-transition: background 0.2s;
        }
  • Zustand B: Ende

    Die für die Transition relevanten veränderten Werte für das Ende setzen:

    1
    2
    3
        .button: hover {
             background: red;
        }

Transition-Eigenschaft verstehen

Die Eigenschaft hat mindestens zwei und maximal vier Werte, die mit einem Space voneinander getrennt werden.

1
2
3
4
    transition: all 2s ease-in 2s; /* explorer 10 */
    -webkit-transition: all 2s ease-in 2s; /* chrome & safari */
    -moz-transition: all 2s ease-in 2s; /* firefox */
    -o-transition: all 2s ease-in 2s; /* opera */

Vendor-Prefixes für Safari, Chrome, Firefox, Opera und Internet Explorer

Die Vendor-Prefixes -webkit, -moz, -o für die Browser Chrome, Firefox, Opera sind einfach ärgerlich! Ihr müsst diese Vendor-Prefixes separat notieren, weil die Entwickler sich nicht auf ein einheitliches Format geeignet haben. Ich werde in den Beispielen nur die -webkit-Version für Safari und Chrome notieren.

1. Pflichtwert: CSS-Eigeschaft

1
    -webkit-transition-property: all;

Der erste Wert bestimmt die zu animierende CSS-Eigenschaft. Der Wert all steht einfach für alle möglichen Werte. Ihr könnt weitestgehend alle CSS-Eigenschaften animieren, die mit absoluten Werten wie Pixel definiert werden.

2. Pflicht-Wert: Zeit

1
    -webkit-transition-duration: 2s;

Der zweite Wert gibt die Zeit für den Ablauf der Animation in Sekunden an.

3. Kann-Wert: Animationskurve

1
    -webkit-transition-timing-function: ease-in;

Eine Animationskurve bestimmt wie eine Animation abläuft. Ein Stein fällt erst langsam und wird immer schneller – das entspricht der Animationskurve ease-in.

Es gibt folgende Werte:

  • ease-in: langsamer Start und schnelles Ende
  • ease-out: schneller Start und langsames Ende
  • ease-in-out: langsamer Start, schneller Mittelteil und langsames Ende
  • ease: ähnlich ease-in-out, startet etwas schneller
  • linear: gleichmäßige Animation
  • cubic-bezier: benutzerdefinierte Kurve

Mit vordefinierten Animationskurven könnt ihr bereits sehr gut arbeiten. Spezielle benutzerdefinierte Kurven werden durch zwei selbstgewählte Punkte auf einer Kurve bestimmt. Am besten schaut ihr euch dafür das Web-Tool CSS3 Bezier Curve Tester an, mit dem Bezierkurven visuell ausprobiert und die Werte für das eigene Projekt kopiert werden können.

4. Kann-Wert: Zeitverzögerung

1
    -webkit-transition-delay: 2s;

Der letzte Wert setzt ein Delay – eine Verzögerung bis die Animation anfängt. Mit diesem Wert lassen sich komplexe Animation mit der Transition-Eigenschaft erstellen, in dem ihr mehrere Animationen von verschiedenen HTML-Elemente zeitverzögert beim Hover-Event triggert (heißt bei einem MouseOver ein Ereignis auslöst). Dazu kommen wir gleich in den Beispielen.

Kurzform versus Langform

Die Eigenschaften einzeln zu notieren, ist einfach zu viel Schreiberei, insbesondere weil jede Zeile wegen der Vendor-Prefixes viermal wiederholt werden muss. Die Kurzform:

1
    -webkit-transition: all 2s easeIn 2s;

bedeutet das gleiche wie:

1
2
3
4
    -webkit-transition-property: all;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: easeIn;
    -webkit-transition-delay: 2s;

Mehrere Eigenschaften animieren

Möchtet ihr nicht eine, aber auch nicht alle CSS-Eigenschaften mit all animieren, müssen die einzelnen Transitions mit Komma separiert hintereinander notiert werden. So können auch für die einzelnen CSS-Eigenschaften unterschiedliche Werte definiert werden;

1
    -webkit-transition: background 2s, height 1s ease-in 1s;

Es werden die Eigenschaften background und height animiert. Background beginnt sofort und dauert zwei Sekunden und height beginnt um eine Sekunde zeitverzögert und dauert eine Sekunde. Die beiden Animation enden also zum gleichen Zeitpunkt.

css3-transition-menu

Der Grundbaustein ist ein Link, dessen Hintergrund bei MouseOver schnell einblendet und langsam wieder ausblendet. Diesen Effekt wenden wir auf ein Menü an. Mit einer zweiten Transition und einem kleinen Trick wird daraus ein reines CSS3-DropDown-Menü.

Basic CSS

Die allgemeinen Eigenschaften für das Dokument. Dann kann es losgehen.

Reseten von CSS-Eigenschaften margin und padding für alle verwendeten Tags und Listenspiegelpunkte entfernen mit list-style:none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    h4, div, ul, li, a {
        margin: 0;
        padding: 0;
    }
    li {
        list-style:none;
    }
    body{
        width:  960px;
        margin: 50px auto; 
        font-family: helvetica;
        font-size: 16px;
        line-height:26px;
    }

CSS3-Link mit zwei Transitions

css3-link-hover

Zuerst HTML: Das ist fast alles nur Layout, damit die drei Beispiele mit Titel nebeneinander angeordnet werden können.

1
2
3
4
    <div class="menuBox">
        <div class="title">Link</div>
        <a href="#">Link mit Background</a>
    </div>

CSS-Layout: DIV.menuBox mit fester Breite und mit der float-Eigenschaft rechts aligniert; font-styles für den Titel.

1
2
3
4
5
6
7
8
9
10
11
    .menuBox {
        width: 150px;  
        float: left;
        margin-right: 100px;   
    }
    .title {
        font-size: 16px;
        font-weight: bold;
        padding: 4px;
        line-height:42px;
    }

Erste Transition: Langsames Einblenden des roten Hintergrundes, dazu noch die Farbe der Schrift von Grau in Schwarz. Die Transition liegt im a-Selector und im a:hover-Pseudo-Selector werden die neuen Werte für das Ende der Animation notiert: background:red und color:black.

1
2
3
4
5
6
7
8
9
10
    a {
        background: none;  
        text-decoration: none;
        color: grey;
        -webkit-transition: all 0.5s ease-out;
    }
    a:hover {
        background: red;
        color: black;
    }

Schnelleres Einblenden des Hintergrundes: Der Trick ist eine zweite Transition, welche die erste nur für den Zustand a:hover überschreibt. Bei a:hover gilt also: Animiere die gleichen Werte, aber in einer kürzen Zeit zurück in den Ausgangzustand!

1
2
3
4
5
    a:hover {
        background: red; /* end values 1. transition ! */
        color: black; /* end values 1. transition !*/
        -webkit-transition: all 0.1s; /* 2. transition*/
    }

CSS3-Menu mit Link-Effekt

css3-transition-menu

Der Link ist der Baustein für das Menü. Es muss nur das Markup im HTML zugefügt werden und etwas padding für die Menüpunkte.

HTML: Die DIV.menuBox für das Gesamtlayout und eine Liste mit den Menüpunkten.

1
2
3
4
5
6
7
8
9
10
11
    <div class="menuBox">
        <div class="title">DropDown Menü</div>
            <ul id="menu" >
                <li><a href="#">Projekte</a></li>
                <li><a href="#">Über uns</a></li>
                <li><a href="#">Referenzen</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Impressum</a></li>
            </ul>
    </div>

CSS: Nur fürs Aussehen etwas mehr Platz für die Menüpunkte. Der Rest wurde bereits definiert.

1
2
3
    #menu li a {
        padding: 4px;
    }

CSS3-DropDown-Menu – zwei Transitions für den Effekt

css3-transition-dropdown-menu

Das Menü sieht so aus, als ob es wie aus einem Guss von oben nach unten slidet. Tatsächlich blendet sich der Hintergrund einfach ein und nur die Schrift animiert hoch und runter.

HTML: Die Layout-Box bekommt noch ein ID ddMenu- sonst gleich wie im letzten Beispiel.

1
2
    <div id="ddMenu" class="menuBox">
    <!-- title, list, etc. -->

CSS einmal komplett und dann der Reihe nach erklärt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    #ddMenu  ul {
        opacity:0;
        background: #f4b2a0;
        -webkit-transition: opacity 0.2s ;
    }
    #ddMenu:hover ul {
        opacity:1;
    }
    #ddMenu li  {
        height: 0;
        -webkit-transition: height .2s ease ;
    }
    #ddMenu:hover li {
        height: 26px;
    }
    #ddMenu li a {
        display: block;
    }
  • Das Dropdown-Menu ist automatisch so breit wie die äußerste Box DIV.menuBox
  • Der Hintergrund der Liste wird Rosa – background: #f4b2a0 – definiert und mit einer Transition bei MouseOver eingeblendet – -webkit-transition: opacity 0.2s.

Das Menü slided nicht wirklich von oben nach unten …

1
2
3
4
5
6
7
8
    #ddMenu  ul {
        opacity:0;
        background: #f4b2a0;
        -webkit-transition: opacity 0.2s;
    }
    #ddMenu:hover ul {
        opacity:1;
    }
  • das ist eine optische Illusion. Nur die Menüpunkte fließen

von oben nach unten. Dafür wird jeder Menüpunkt in der Höhe auf null gesetzt – height: 0 – und dann mit der Transition auf height: 26px animiert.

1
2
3
4
5
6
7
    #ddMenu li  {
        height: 0
        -webkit-transition: height .2s ease;
    }
#ddMenu:hover li {
        height: 26px;
    }
  • Zuletzt wird der a-Tag display: block definiert, damit jeder Link bis zum Zeilenende geht – also bei MausOver komplett Rot wird.
1
2
3
    #ddMenu li a {
        display: block;
    }

Das DropDown-Menu war etwas schwieriger, machen wieder einfacher weiter mit Bildunterschriften.

Beispiel: RollOver-Effekte für Bildunterschriften

css3-transition-caption-effekte

Die Bildunterschriften werden mit verschiedenen Transitions eingeblendet:

  1. einfach überblenden
  2. über das Bild sliden
  3. die Bildunterschrift schiebt das Bild raus.

Basic HTML und CSS für alle drei Beispiele

HTML: Jedes Bildbeispiel ist gleich aufgebaut: eine DIV.imageBox mit IMG und DIV.figure. Die Transition kommt in eine weitere CSS-Class.

1
2
3
4
    <div class="imageBox">
        <img src="img/bild2566.png" width="220" height="220" />
        <div class="figure">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    </div>

CSS

  • Der BODY wird auf 960 Pixel Breite zentriert und die Font-Eigenschaften definiert.
  • DIV.imageBox: Position:relative gesetzt, damit die Bildunterschrift innerhalb der Box absolute gesetzt werden kann. Wer es vergessen hat, kann das in diesem Artikel CSS Position: relative und absoluteauffrischen. DIV.imageBox hat eine feste Größe und overflow: hidden, damit die Bildunterschrift nicht außerhalb der Box sichtbar ist.
  • DIV.figure: Box für die Bildunterschrift, absolute positioniert am unteren Rand von DIV.imageBox ausgerichtet; etwas padding, margin und background:white für das Aussehen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    body {
        width:  960px;
        margin: 50px auto; 
        font-family: helvetica;
        font-size: 16px;
    }
    .imageBox {
        position: relative;
        overflow: hidden;
        width: 220px; height:220px;
        float: left;
        margin-right: 100px;   
    }
    .figure {
        position: absolute;
        bottom: 0; left: 0;
        padding: 5px;
        margin:5px;
        background: white;
    }

1. CSS3-Transition: Bildunterschrift einblenden

css3-transition-image-caption-blending

HTML: Die Box für die Bildunterschrift DIV.figure bekommt eine zweite Klasse tr-opacity, in der die Transition definiert wird.

1
     <div class="figure tr-opacity">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

CSS ist das bekannte Transition-Muster: Transition mit der opacity-Eigenschaft zum Einblenden und der :hover-Selector, um den Endzustand zu definieren.

1
2
3
4
5
6
7
    .imageBox .tr-opacity {
        opacity:0;
        -webkit-transition: opacity 0.5s;
    }
    .imageBox:hover .tr-opacity {
        opacity:1;
    }

2. CSS3-Transition: Bildunterschrift slideIn

css3-transition-image-caption-slidein

HTML: Die Box für die Bildunterschrift DIV.figure bekommt jetzt die Klasse .tr-slideIn.

1
    <div class="figure .tr-slideIn">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

CSS: Die Bildunterschrift wird links außerhalb des Bildrahmens positioniert mit left: -220px und bei Hover nach rechts bewegt left: 0. Der Rest ist Aussehen: feste Größe, andere Schriftfarbe und eine Transparenz.

1
2
3
4
5
6
7
8
9
10
11
12
13
    .imageBox .tr-slideIn {
        left: -220px;
        width: 210px; height: 130px;
        margin: 0;
        padding-top: 85px;
        opacity: 0.7;  
        background:grey;
        color: white;
        -webkit-transition: all 0.5s;
    }
    .imageBox:hover .tr-slideIn {
        left: 0;
    }

2. CSS3-Transition: Bild slideOut und Bildunterschrift slideIn

css3-transition-image-caption-slidein-slideout

HTML: Für das letzte Beispiel muss das HTML etwas verändert werden, weil auch das Bild animiert wird. Während die Bildunterschrift wie im vorherigen Beispiel links reinfährt, schiebt sich das Bild rechts raus. Dafür wird IMG in ein DIV.tr-slideImgOut verschachtelt.

1
2
3
4
    <div class="imageBox">
        <div class="tr-slideImgOut"><img src="img/bild2210.png" width="220" height="220" /></div>
        <div class="figure tr-slideIn">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    </div>

CSS: Ihr fügt eine zweite Klasse tr-slideImgOut für Bildbox ein. Diese wird wie die Bildunterschrift position: absolute gesetzt und nach genau gleichem Muster mit einer Transition bei Hover links aus dem Bild bewegt. Dann wirkt es so, als ob die Bildunterschrift das Bild rausschiebt.

1
2
3
4
5
6
7
8
    .imageBox .tr-slideImgOut {
        position: absolute;
        top: 0; left: 0px;
        -webkit-transition: left 0.5s;
    }
    .imageBox:hover .tr-slideImgOut {
        left: 220px;
    }

Beispiel: Komplexe Transition mit der Delay-Eigenschaft

css3-complex-transition-delay

Die vierte Eigenschaft -webkit-transition-delay ist der Schlüssel für komplexe Animation mit der CSS-Transition-Eigenschaft. Mit einem Delay können mehrere Transitions zeitversetzt abgespielt werden. Schauen wir uns das Beispiel genauer an.

HTML: Vier Boxen sind in ein DIV.master verschachtelt.

1
2
3
4
5
6
7
8
9
    <div id="master">
        <div class="box-1">
            <div class="box-2">
                <div class="box-3">
                    <div class="box-4"></div>
                </div>
            </div>
        </div>
     </div>

CSS Layout: Der erste Schritt ist das Layout umzusetzen, welches das Ende der Transition definiert. Im zweiten Schritt wird die Transition eingefügt.

Die Boxen sind abwechselnd Rot und Grün gefärbt. Mit -webkit-border-radius wird aus dem Quadrat ein Kreis.

DIV.master wird position:relative gesetzt, die Kreise position:absolute und können mit top und left angeordnet werden, bis das Layout passt.

DIV.master bekommt noch ein overflow.hidden, damit kein Content über den Rand des DIV.master bei der Animation sichtbar ist.

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
33
34
35
    #master {
        position: relative;
        margin: 150px auto;
        width: 600px; height: 600px;
        overflow: hidden;
        background: green;
    }
    #master .box-1 {
        position: absolute;
        width: 600px; height: 600px;
        top: 0; left: 0;
        background: red;
        -webkit-border-radius:300px;
    }
    #master .box-2 {
        position: absolute;
        width: 450px; height: 450px;
        top: 25px; left: 25px;
        background:green;
        -webkit-border-radius:225px;
    }
    #master .box-3 {
        position: absolute;
        width: 300px; height: 300px;
        top:25px; left: 25px;
        background: red;
        -webkit-border-radius:150px;
    }
    #master .box-4 {
        position: absolute;
        width: 150px; height: 150px;
        top:35px; left: 35px;
        background: green; 
        -webkit-border-radius:75px;
    }

CSS Transition: DIV.master ist die äußerste Box und löst nach dem Muster DIV.master:hover die Transitions der inneren Boxen aus. Für die Transitions wurden die Werte delay gesetzt – 0.3s, 0.6s und 0.9s – der diese zeitverzögert abspielt.

Die Werte für die Transition fügt ihr nach folgendem Muster ein:

1
2
3
4
5
6
7
8
9
10
11
    #master .box-1 {
        position: absolute;
        width: 600px; height: 600px;
        top: -600px; left: -600px; /*  vorher top: 0; left: 0; */
        background: red;
        -webkit-border-radius:300px;
        -webkit-transition: all 0.5s ease-out;
    }
    #master:hover .box-1{
        top: 0; left: 0;
    }
  • Animiert werden immer die CSS-Eigenschaften top und left.
  • Die Werte aus dem Layout sind die Endwerte und werden in den hover kopiert.
  • Im Layout werden neue Werte gesetzt. Die Kreise werden um ihre eigene Größe nach oben und links versetzt. Dann bewegen sich die Kreise genau diagonal in die Endposition.

CSS komplett

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    #master {
        position: relative;
        margin: 150px auto;
        width: 600px; height:600px;
        overflow:hidden;
        background:green;
    }
    #master .box-1 {
        position: absolute;
        width: 600px; height: 600px;
        top: -600px; left: -600px;
        background: red;
        -webkit-border-radius:300px;
        -webkit-transition: all 0.5s ease-out;
    }
    #master:hover .box-1{
        top: 0; left: 0;
    }
    #master .box-2 {
        position: absolute;
        width: 450px; height: 450px;
        top: -450px; left: -450px;
        background:green;
        -webkit-border-radius:225px;
        -webkit-transition: all 0.5s ease-out 0.3s;
    }
    #master:hover .box-2 {
        top: 25px; left: 25px;
    }
    #master .box-3 {
        position: absolute;
        width: 300px; height: 300px;
        top: -300px; left: -300px;
        background: red;
        -webkit-border-radius:150px;
        -webkit-transition: all 0.5s ease-out 0.6s;
    }
    #master:hover .box-3 {
        top: 25px; left: 25px;
    }
    #master .box-4 {
        position: absolute;
        width: 150px; height: 150px;
        top:-150px; left: -150px;
        background: green; 
        -webkit-border-radius: 75px;
        -webkit-transition: all 0.5s ease-out 0.9s;
    }
    #master:hover .box-4 {
        top: 35px; left: 35px;
    }

Das ist eine ganze Menge Code, wobei sich allerdings das meiste nach dem gleichen Muster wiederholt.

Fazit

Mit der Transition-Eigenschaft könnt ihr ohne Programmierkenntnisse einfache und elegante Bewegungseffekte erzielen. Für komplexe Animationen gibt es einen Trick mit der transition-delay-Eigenschaft mehrere Transitions nacheinander abzuspielen.

Im Interface sollten Transition-Effekte nicht zum Erhaschen von Aufmerksamkeit eingesetzt werden. Die Effekte verpuffen nach dem ersten Anschauen und werden langweilig.

Im Interaction Design verwenden wir Transitions gezielt, um die User Experience zu verbessern, das heißt, das Interface für den User erlebbar zu machen. Mit Animationen wird die Navigation unterstützt, die Orientierung erleichtert oder eine User-Aktion verdeutlicht. Zwischen einem bloßen Effekt und einer sinnvollen Animation können Millisekunden liegen, nämlich sobald der User anfängt zu warten, bis die Animation endlich fertig ist, und das Interface weiter genutzt werden kann.

Hier noch Mal Demo & Code

Demo Menüs mit CSS3-Transitions
Demo Bildunterschriften mit CSS3-Transitions
Demo komplexe Transition mit Delay
Download Code

Im nächsten Teil dieser Serie geht es um CSS3 Transformations.

Artikel dieser Serie CSS3-Animations
Part I: CSS3-Transition und Hover-Effekte
Part II: CSS3-Transform
Part III: CSS3-Keyframe-Animation


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


9 Kommentare

  1. Posted 24. August 2013 at 17:08 | Permalink

    Tolles Tutorial. Ich hab CSS3-Transition: Bild slideOut und Bildunterschrift slideIn versucht. Klappt mit ein paar Anpassungen wunderbar. Ist Dir eine Fallbackmethode für den IE8 bekannt oder ein Polyfill?

    • admin
      Posted 3. September 2013 at 15:26 | Permalink

      3-D Transitions ist über CSS3 im IE>8 nichts zu machen. Das ist im IE nicht implementiert. Strategie wäre für IE alternativen CSS-Code zu setzen bzw. über Javascript / jQuery eine Transition zu implementiere. Das ist natürlich dann eine ganz andere Baustelle.
      Besten Gruß Pepe

  2. Posted 4. September 2013 at 07:29 | Permalink

    Danke Pepe! Ich hab die Transition durch Opacity ersetzt. Das heißt, das eine Bild wird über opacity on hover ein-, das andere ausgeblendet und für den IE6+ verwende ich dafür die filter-property.
    http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

  3. Posted 28. Oktober 2013 at 20:18 | Permalink

    Tolles Tutorial Pepe. Vielen Dank für die Tipps!

  4. Erich Haselmeier
    Posted 13. Januar 2014 at 14:36 | Permalink

    Wie kann ich einen Hover Effekt erstellen, wo die Grafik an einer anderen Stelle als der auslösende Button ist.
    Vielen Dank.

    • pepe
      Posted 16. Januar 2014 at 16:59 | Permalink

      Die pseudo-class hover wird immer auf ein Element angewandt. Was du damit veränderst, ist komplett Dir überlassen – es muss sich nur im Selector abbilden lassen.

      Ein Beispiel: der hover wird aktiviert über dem Element mit der Klassse .banner, doch verändert wird das Element mit der Klasse .title
      #header .banner:hover .title {
      display:visible;
      color:red
      }

      Wenn sich dein Element allerdings nicht innerhalb des CSS-Selectors ansprechen lässt, hilft nur noch Programmieren mit Javascript. Das wäre zum Beispiel der Fall für ein Element ausserhalb von dem #header.
      Über position: relative/absolute würden sich Elemente allerdings ohne Probleme ausserhalb der box #header positionieren lassen s.h. http://www.pepe-juergens.de/2013/01/css-position-relative-absolute-fixed/. Die könnten dann ohne Probleme mit hover animiert werden.

  5. Posted 15. November 2014 at 15:27 | Permalink

    Vielen Dank für dieses ausführliche Tutorial und all die Infos und Beispiele. Sehr hilfreich.

  6. Posted 11. Januar 2015 at 18:03 | Permalink

    Hallo Pepe,

    bei dem zweiten Bilderbeispiel (“2. CSS3-Transition: Bildunterschrift slideIn”) verwendest du in der Transition den Befehl “all”:

    1
    -webkit-transition: all 0.5s;

    Gebraucht würde aber nur “left”.
    Gibt es da irgendwelche performanten Unterschiede?

    • pepe
      Posted 12. Januar 2015 at 08:33 | Permalink

      Hallo Adrian,
      ja, das ist wahrscheinlich, denn der Browser versucht, jede CSS-Eigenschaft zu animieren.
      Es ist auch übersichtlicher, explizit die zu animierenden CSS-Eigenschaften anzugeben. Wenn du später dein Code noch mal durchschaust, ist sofort klar, was da animiert wird.
      Danke und besten Gruß Pepe

Ein Trackback

  1. [...] Link: CSS3-Transitions und Hover-Effekte [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>