Design, Interaction, Code & Teaching

014 CSS3-Keyframe-Animation – CSS3-Animations Part III

skizze-css-animation-bird-flying

Wenn ein Bild mehr als 1000 Worte sagt, was kann dann eine Animation alles ausdrücken? Oft übernehmen einfache Animationen die Erklärung komplexer Zusammenhänge auf Webseiten oder in Applications. Animationen werden als Mittel der Nutzerführung eingesetzt – gerade im mobilen Kontext. Blinkende Buttons fordern uns zur Interaktion auf und ein kreisender Pfeil zeigt uns, dass wir auf das Nachladen von Daten warten müssen. Animationen spielen eine zentrale Rolle im Web- und Application-Design.

Im dritten Teil der Serie stelle ich CSS3-Animations vor. Bei Animationen denken die meisten an Adobe Flash, doch leider wurde Flash nicht für iOS oder Android entwickelt. Zum Glück können wir Web-Animationen auch mit CSS3 realisieren, die sowohl auf modernen Browsern als auch auf Smartphones und Tablets wunderbar flüssig laufen.

In den Beispielen fangen wir mit einfachen Loops an wie ein Glow-Effekt für einen Button, ein Loading-Cycle und eine Slideshow. Dann animieren wir eine richtige Szene mit Vordergrund, Hintergrund, einem Cast und einem Interface mit Restart und Pause. Das ist der Blueprint für eure Projekte.

    CSS3-Keyframe-Animation

  1. Keyframe-Animation verstehen
  2. Transition versus Animation
  3. Animation Code Muster – 2 Schritte
  4. Beispiel 1: Einfache Loops Button und Loading Cycle
  5. Beispiel 2: Slideshow
  6. Beispiel 3: Trickfilm – Szene mit mehreren Objekten animieren
  7. Preload Images – Bilder vorladen
  8. Interface für CSS3-Animation – Restart, Play und Pause
  9. Adobe Edge Animation – Software für komplexe CSS3-Animations
  10. Fazit

Beispiele und Code (auch Demos)
glow-buttonloading-cycle
slideshow-small
scene-small

Einfache Loops: Button & Loading Cycle
Slideshow
Szene animieren
Download Code Beispiele & Demos

Keyframe-Animation verstehen

In einer Animation werden Objekte bewegt oder deren Eigenschaften wie Farbe verändert. Bei einer Keyframe-Animation wie in CSS3 werden die Eigenschaften der Anfangs- und Endpunkte einer Animation gesetzt und die Frames (Frames sind Bilder) dazwischen berechnet der Browser. Diese Anfangs- und Endpunkte heißen Keyframes oder Schlüsselbilder. Ihr könnt fast alle CSS-Eigenschaften animieren wie background, top, left, besonders einfach lassen sich Objekte bewegen, rotieren und skalieren mit CSS-Transforms.>

Transition versus Animation

Eine Transition ist ein animierter Übergang zwischen genau zwei Keyframes (Schlüsselbildern), der von einem Event getriggert wird (von einem Ereignis ausgelöst) und vor- und zurückläuft.

Eine Animation hat beliebig viele Keyframes. Die Animation läuft von einem Keyframe zum nächsten, wie ein Film von einer Kameraeinstellung zur nächsten springt. Eine Animation hat ein Ende. Ihr könnt im CSS einstellen, dass eine Animation am Ende looped, rückwärts läuft, ein anderes Event triggert oder eben zu Ende ist.

Vendor-Prefixes

Für CSS3-Animation gelten die Vendor-Prefix-Regeln wie für CSS3-Transition und CSS3-Transform: Für die verschiedenen Browser muss das Prefix -webkit, -moz, -o und ohne Prefix notiert werden. Ich notiere nur das Prefix -wekit für Safari und Chrome.

Browser-Support

CSS3-Animation wird in gleicher Weise von Browsern unterstützt wie CSS3-Transition: alle aktuellen Browser-Versionen außer Internet Explorer 9.

Animation Code Muster – 2 Schritte

  1. Eigenschaften für die Keyframes der Animation definieren und diese Keyframes-Animation frei benennen.
  2. Über diesen frei gewählten Namen die Keyframe-Animation einem oder mehreren HTML-Elementen zuordnen und weitere Einstellungen für den Ablauf der Animation definieren.

1. Keyframes definieren – die Regeln für die Animation

Nach dem Schlüsselwort @keyframes folgt der frei gewählte Name der Animation.

Das erste Paar geschweifte Klammern umfasst alle Keyframes. Ein Keyframe gibt den Zeitpunkt der Veränderung an, entweder absolut in Sekunden oder relativ in Prozenten in Bezug auf die Gesamtlänge. Die Gesamtlänge muss im zweiten Schritt angegeben werden.

Zum Zeitpunkt werden in ein weiteres Paar geschweifte Klammern die zu verändernden CSS-Eigenschaften definiert.

Damit habt ihr die Regeln für eine Keyframe-Animation erstellt, die beliebigen HTML-Elementen zugeordnet werden kann. Am besten notiert ihr alle Keyframe-Animations übersichtlich am Ende des CSS-Files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    @-webkit-keyframes frei-gewahlter-name {
        0% {
            background-color:black;
        }
        25% {
            background-color:red;
        }
        50% {
            background-color:green;
        }
        75% {
            background-color:yellow;
        }
        100% {
            background-color:black;
        }
    }

2. Keyframes HTML-Elementen zuordnen

Mit dem frei gewählten Namen wird die Animation mit der CSS-Eigenschaft animation: name 3s für ein HTML-Element definiert und läuft direkt nach dem Laden der Webseite ab.

1
2
3
    .background {
        -webkit-animation: frei-gewahlter-name 4s infinite;
    }

Link Animation Hintergrundfarben

Pflichtwerte für eine Animation sind der frei gewählte Name der Keyframe-Animation und die Dauer in Sekunden. Es gibt insgesamt sechs Einstellungsmöglichkeiten. Schaut sie euch einmal an, um die Möglichkeiten im Kopf zu haben. In den Beispielen wenden wir die wichtigsten Einstellungen an. Und der Shortcut erspart euch viel Tippperei.

1
2
3
    .background {
         -webkit-animation: hintergrundfarbe 1s 2s 4 ease-in alternate backwards
    }

Weitere Einstellungsmöglichkeiten sind alte Bekannte von CSS-Transition:

  • delay: Verzögerung, bis die Animation abspielt
  • animation-timing-function: Animationskurve, mit welchen Geschwindigkeiten die Animation abspielt.

Zusäztlich gibt es noch:

  • iteration-count: Anzahl der Wiederholungen bis unendlich
  • animation-direction: Wie eine Animation wiederholt wird – loopen, rückwärts abspielen, etc.
  • animation-fill-mode: Was bei einem Delay am Anfang oder am Ende der Animation zu sehen ist – der Effekt oder eben nichts.

Hier die Longform der CSS-Eigenschaft animation mit allen möglichen Werten. Das sollte selbsterklärend sein.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    .box-animaton {
        /* frei gewaehlter Name*/
        -webkit-animation-name: hintergrundfarbe;  
        /* Abspieldauer  in Sekunden*/
        -webkit-animation-duration: 2s;
        /* Wiederholungen in Zahlen*/  
        -webkit-iteration-count: infinite;
        /* Verhalten am Ende bei Wiederholungen mit:
        normal / reverse / alternate / alternate-reverse */

        -webkit-animation-direction: backwards;
        /* Animatioskurve mit:
        ease / ease-in / ease-out / ease-in-out / liner / bezier */

        -webkit-animation-timing-function: ease-out;
        /* Fill-Mode für den Effekt bei einem Delay sichtbar mit:
        none / forwards / backwards / both */

        animation-fill-mode: forwards;
    }

Beispiel 1: Einfache Loops – Button und Loading Cycle Symbol

Glowing Button Loop

glow-button

Idee: Ein Button mit Bewegungseffekt bekommt vom User sofort ungeteilte Aufmerksamkeit. Die Bewegung ist ein leichter animierter Glow-Effekt um den Button.

HTML: ein DIV mit dem Buttontext

1
    <div class="button">I glow a little bit!</div>

CSS: Class .button und keyframes glowIt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    .button {
        display: inline;
        padding: 8px;
        font: 1em/1.5em Helvetica, Arial;
        color: white;
        letter-spacing: 1px;
        background-color: #749a02;
        -webkit-border-radius:6px;
        -webkit-animation: glowIt 2s infinite;
    }
    @-webkit-keyframes glowIt {
        0% {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 9px #ccc;
        }
        50% {
            background-color: #91bd09;
            -webkit-box-shadow: 0 0 18px #91bd09;
            }
        100% {
            background-color: #749a02;
            -webkit-box-shadow: 0 0 9px #ccc;
        }
    }
  • CSS Button Style: Runde Ecken mit -webkit-border-radius:6px und eine Hintergrundfarbe mit background-color: #749a02, dazu ein paar Styles für die Schriftformatierung und ein Randabstand mit padding:8px.
  • Der Button funktioniert auch ohne Animation. Fügen wir jetzt den Style für die Animation ein und deklarieren darunter die Keyframes. Die Animation soll glowIt heißen und linear endlos infinite abspielen. Ein Loop dauert 2s.
  • Die Keyframes für glowIt: Der Effekt wird mit dem Style -webkit-box-shadow: 0 0 18px #91bd09 erreicht. Die CSS-Eigenschaft box-shadow fügt dem HTML-Element einen Schatten zu. Der dritte und vierte Wert sind die Stärke des Weichzeichnens und die Farbe des Schattens. Diese Werte werden animiert und lassen den Button glühen. Die ersten beiden Werte geben nur den Versatz des Schattens an und bleiben unverändert.
  • Permanent einen glühenden Button zu sehen, ist penetrant. Ersetzt infinite mit einer Anzahl, um den Button nur zweidreimal aufleuchten zu lassen.

    Loading Cycle Loop

    loading-cycle

    Dieser Hinweis sollte nicht fehlen während des Ladens von Seitenelementen. Der User bekommt ein Feedback, dass etwas passiert und dass er warten muss.

    Zwei Kreise drehen sich in entgegengesetzter Richtung. In beiden Kreisen sind drei Viertel des Randes Grün gefärbt.

    HTML: Zwei DIVs für die Kreise, ineinander verschachtelt

    1
    2
    3
        <div class="loading-cycle">
            <div></div>
        </div>

    CSS: Classes und keyframes

    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
        .loading-cycle {
            width:26px;height:26px;
            border:4px solid white;
            border-top-color: #749a02;
            border-bottom-color: #749a02;
            border-left-color:#749a02;
            -webkit-border-radius: 17px;
            -webkit-animation: spinnLeft 2s linear infinite;
        }

        .loading-cycle > div {
            width:14px; height:14px;
            margin: 2px auto;
            border: 4px solid white;
            border-bottom-color:#749a02;
            border-right-color:#749a02;
            border-left-color:#749a02;
            -webkit-border-radius:12px;
            -webkit-animation: spinnRight 2s linear infinite;
        }

        @-webkit-keyframes spinnLeft {
            0% { -webkit-transform:rotate(0deg); }
            100% { -webkit-transform:rotate(-360deg); }
        }

        @-webkit-keyframes spinnRight {
            0% { -webkit-transform:rotate(0deg); }
            100% { -webkit-transform:rotate(720deg); }
        }
    • CSS für einen Kreis: Ein Quadrat mit abgerundeten Ecken, wobei der border-radius die Hälfte des Durchmessers beträgt. Der Durchmesser wird mit dem Box-Model berechnet – also für den äußeren Kreis width:26px + (2 * border:4px) = 34px.
    • Kreis mit drei Viertel Rand sichtbar: Dafür wird erst mal der border Weiss wie der Hintergrund gefärbt und dann mit border-color drei Viertel des Kreises mit Grün überschrieben.
    • Der zweite innere Kreis wird mit dem Descendant-Selector .loading-cycle > div selektiert. Das Zeichen > selektiert Kindelemente. Der innere Kreis wird mit margin: 2px auto zentriert und etwas nach unten versetzt. Die restlichen Styles entsprechen dem ersten Kreis.
    • Die Kreise bekommen eine Animation spinnRight und spinnLeft, die 2s dauern und infinite loopen.
    • In den Keyframes werden mit der CSS-Eigenschaft transform die Kreise in entgegengesetzter Richtung rotiert. Fertig ist das Loading-Symbol.

    Page FadeIn – Seite weich einblenden

    Habt ihr bemerkt, dass die Seite mit Beispielen butterweich einblendet – ein Tick zu langsam, um den Effekt zu verdeutlichen.

    1
    2
    3
    4
    5
    6
    7
    8
    9
        body {
            width:  600px;
            margin: 45px auto; 
            -webkit-animation: fadeIn 5s;
        }
        @-webkit-keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
    • Der Trick ist, die opacity der gesamten Seite langsam einzublenden. Die Animation wird dem BODY-Tag zugewiesen, heißt fadeIn und dauert 5s.
    • Es gibt zwei Keyframes, die die opacity von dem Wert 0 – alles ausgeblendet – auf 1 – alles sichtbar animiert.
    • Beispiel 2: Slideshow

      Ein Laufband funktioniert so: Ein Objekt läuft durch eine Maske. Sobald es auf einer Seite komplett durchgelaufen ist, wird es wieder auf die andere Seite gesetzt, und der Vorgang wiederholt sich.

      HTML: Zwei verschachtelte DIVs – das äußere für die Maske und das innere für die animierte Box.

      1
      2
      3
          <div class="masc">
              <div class="typo-band">hello, infinite band animation</div>
          </div>

      CSS Class .masc

      1
      2
      3
      4
      5
      6
      7
          .masc {
              position: relative;
              width: 598px; height: 198px;
              border: 2px solid black;
              background: #eee;
              overflow: hidden;
          }

      CSS Maske: DIV.masc bekommt eine feste Breite und Höhe und die CSS-Eigenschaft overflow:hidden. Mit overflow:hidden werden die über den Rand stehenden verschachtelten Elemente ausgeblendet. DIV.masc wird position:relative gesetzt, damit die innere Box mit top und left absolute positioniert werden kann.

      Laufband mit Text

      Im ersten Laufband animieren wir eine Textbox.

      typo-band-big

      CSS Class .typo-band und keyframes infinite-band

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
          .typo-band {
              position: relative;
              width: 598px; height: 198px;
              border: 2px solid black;
              background: #eee;
              overflow: hidden;
          }
          @-webkit-keyframes infinite-band {
              0% { left:100%;}
              100% { left: -100%;}
          }
      • CSS Textbox Styles: Die Box DIV.typo-band wird position:absolute, top:0 und left:100% positioniert. Mit left:100% verschieben wir die Box um die Breite des Elternelements nach rechts – die Schriftbox befindet sich also rechts außerhalb des maskierten Bereiches. Die Positionierung über Prozente statt feste Pixelwerte erleichtert uns das Leben, falls wir später die Breite des Laufbandes ändern wollen. Die Schrift noch etwas größer, bold und mit line-spacing formatieren.
      • skizze-typo-band-animation

      • CSS Textbox Animation: Die Typobox läuft durch die Maske und wird am Ende wieder an den Anfang gesetzt. Die Animation heisst infinite-band, dauert 10s, verläuft linear und infinite endlos.
      • Die Keyframes von infinite-band animieren die CSS-Eigenschaft left. Den Startwert kennen wir schon left:100% und der Endwert ist left:-100%, also wenn sich die Textbox links außerhalb des maskierten Bereiches des Elternelements befindet.

      Slideshow -Laufband mit Bildern

      slideshow-big

      Das Textband läuft nicht nahtlos hintereinander, sondern mit einem Abstand von der Breite der Maske. Der Text kann erst wieder an die Anfangsposition gesetzt werden, wenn er komplett rechts rausgelaufen ist. Bei einer Slideshow würde so eine Lücke zwischen den Bildern stören.

      background-image-kacheln

      Bei einer Slideshow müssen also am Ende des Bandes, die ersten Bilder noch mal wiederholt werden. Der Trick ist, die einzelnen Bilder als ein Hintergrundbild zu definieren. Die CSS-Eigenschaft background-image kachelt das Bild automatisch hintereinander.

      skizze-slideshow-animation

      HTML wie das Textlaufband nur mit anderer Class-Benennung

      1
      2
      3
      4
      5
          <div class="masc">
             <div class="slideshow">
             <!-- background image in div -->
             </div>
          </div>

      CSS Class .slideshow und keyframes infinite-image

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
          .slideshow {
              position:absolute;
              top: 0; left: 0;
              width: 1889px; height:100%;
              background-image: url('../imgs/poster.jpg');
              -webkit-animation: infinite-image 15s linear infinite;
          }
          @-webkit-keyframes infinite-image {
              0% { left:0;}
              100% { left: -1289px; }
          }
      • CSS .slideshow Styles: Für die Box Div.slideshow muss die height:100% gesetzt werden, so groß wie das Elternelement. Die width:1900px rechnet sich aus der Breite des Hintergrundbildes 1300px + der Breite der Maske 600px. Diese 600px sind der sichtbare Bereich, in der sich das Hintergrundbild wiederholt, bevor das Band wieder an den Anfang des Loops springt.
      • Die Animation heißt diesmal infinite-image, dauert 15s, läuft linear und infinite endlos.
      • Die Keyframes von infinite-band animieren wieder die CSS-Eigenschaft left. Diesmal mit absoluten Werten. Die Box läuft von left:0 bis left:-1289px – also bis zum Ende der ersten Kachel des Hintergrundbildes.

      MouseOver Pause und Play

      Eine Slideshow, die permanent läuft, ist etwas aufdringlich. Ihr könnt ein MouseOver einbauen, das die Slideshow startet und pausiert. Mit der CSS-Eigenschaft animation-play-state wechseln wir bei MouseOver den Wert von pause auf running.

      HTML: DIV.slideshow erhält eine weitere Class .state.

      1
      2
      3
      4
      5
          <div class="masc">
             <div class="slideshow state">
             <!-- background image in div -->
             </div>
          </div>

      CSS Class .state

      1
      2
      3
      4
      5
      6
          .masc .state {
              -webkit-animation-play-state:paused;
          }
          .masc:hover .state{
              -webkit-animation-play-state:running;  
          }

      CSS: Die Class .state hat nur eine CSS-Eingeschaft animation-play-state, die bei Hover von pause auf running wechselt. DIV.masc:hover löst dieses MouseOver aus.

      Beispiel 3: Trickfilm – Szene mit mehreren Objekten animieren

      scene-big

      Die Idee ist eine Art Jumb & Run. Die Landschaft läuft durch das Bild, vor dem ein Objekt hin- und herfliegt. Die Wolken ziehen langsam am Horizont und im Vordergrund wird Gras bewegt. Wichtig ist, strukturiert mit einem Plan zu arbeiten. Sonst verliert ihr schnell den Überblick – alles weitere wissen wir schon, um eine kleine Szene mit mehreren Objekten zu animieren.

      Assets vorbereiten

      Assets sind das Material der Animation. In diesem Fall müssen wir vier Bilder vorbereiten. Ich habe abstrakte Flächen genommen. Ihr könnt schöne Illustrationen machen.

      • Hintergrund / Landschaft: Größe 700px * 400px
      • Wolken: Größe 700px * 400px transparent
      • Gras: Größe 700px * 400px transparent
      • Cast: Größe 44px * 44px

      Assets positionieren, stylen und animieren

      Eine Animation mit mehreren Elementen ist eine Frage der Organisation der einzelnen CSS-Classes. Ich trenne die unterschiedlichen Funktionen Positionierung, Aussehen und Animation in einzelne CSS-Classes.

      HTML: Ein äußeres DIV.stage mit ein DIV pro Asset.

      1
      2
      3
      4
      5
      6
          <div id="stage">
              <div class="position background"></div>
              <div class="position clouds clouds-ani"></div>
              <div class="position meadow meadow-ani"></div>
              <div class="position cast cast-ani"></div>     
          </div>

      CSS für stage, assets und keyframes

      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
      52
      53
      54
      55
          /* state masc */
          #stage{
              position:relative;
              width: 700px; height:400px;
              border:2px solid gray;
              overflow:hidden
          }

          /* position  */
          .position{
              position:absolute;
              top: 0; left: 0;
          }

          /* background images */
          .background {
              width: 100%; height:100%;
              background-image: url('../imgs/background.gif');
          }
          .clouds {
              width: 200%; height:100%;
              background-image: url('../imgs/clouds.png');
          }
          .meadow {
              width: 200%; height:100%;
              background-image: url('../imgs/meadow.png');   
          }
          .cast{
              width: 45px; height:45px;
              background-image: url('../imgs/cast.gif');
              -webkit-transform: translate(100px, 200px);
          }

          /* animations */
          .clouds-ani{
              -webkit-animation: infinite-image 25s linear infinite;
          }
          .meadow-ani{
              -webkit-animation: infinite-image 8s linear infinite;
          }
          .cast-ani {
              -webkit-animation: flyCast 20s ease-in-out infinite;   
          }

          @-webkit-keyframes infinite-image {
              0% { left:0;}
              100% { left: -100%;}
          }
          @-webkit-keyframes flyCast {
              0% {-webkit-transform: translate(100px, 200px) }
              30% { -webkit-transform: translate(400px, 300px) scale(1.8) rotate(-35deg)}
              60% {-webkit-transform: translate(600px, 50px)scale(0.6) rotate(35deg)}
              85% {-webkit-transform: translate(300px, 220px)scale(1) rotate(15deg)}
              100% {-webkit-transform: translate(100px, 200px) rotate(0deg)}
          }
      • Rahmen und Maske – DIV.stage
        Gleiches Prinzip wie bei der Slideshow – feste Größe, position:relative, damit Kindelemente position:absolute positioniert werden und overflow:hidden für die Maske.
      • Assets positionieren – class .position
        Alle Assets werden gleich positioniert position:absolute; top: 0; left: 0; – wegen der Transparenz in den Bildern verdecken sich nicht die Motive.
      • Assets stylen – Classes .background, .clouds, .meadow, .cast
        Jedes Asset unterscheidet sich durch ein Bild, das als background-image:url(‚…‘) in einer spezifischen Class festgelegt wird.
        DIV.background ist width:100% und height:100% – genauso groß wie die Maske.
        Die Wolken DIV.clouds und das Gras DIV.meadow sind height:100% und width:200% – diese werden wie das Laufband animiert und sind deshalb mindestens doppelt so breit.
        Das Object DIV.cast ist genauso groß wie das Hintergrundbild 45px x 45px.
      • Laufband Animation – DIV.clouds-ani & DIV.meadow-ani
        Die Styles für die Animationen bekommen jeweils eine Class. Alles weitere funktioniert wie beim Laufband: Die Box wird immer wieder an die Anfangsposition gesetzt. Ihr braucht nur eine Keyframe-Animation infinite-image, weil die Animationen gleich sind. Sie unterscheiden sich nur in der Dauer. Hier zeigt sich, wie praktisch es ist, nicht mir absoluten Werten für width und left zu arbeiten.
      • Cast Animation – DIV.cast-ani
        Hier passiert etwas mehr. Die Animation flyCast looped in 20s. Die Animationskurve ist ease-in-out – langsam starten und langsam stoppen, sodass die etwas ziehende Bewegung entsteht.
      • In den Keyframes von flyCast wird intensiv mit der CSS3-Eigenschaft transform bewegt, vergrößert, verkleinert und rotiert. Es entsteht der Eindruck, das Objekt fliegt nach vorn und nach hinten.

      Das wäre ein Blueprint für Animationsprojekte. Mit der CSS-Eigenschaft animation-delay könnt ihr weitere Animationen zeitverzögert starten und so komplexere Szenen erschaffen.

      Preload images – Bilder vorladen

      Bilder für Animation sollten garantiert im Speicher des Browsers sein, wenn die Animation startet. Sonst spielt die Animation ohne die Bilder ab! Für das Vorladen von Assets, Preloading genannt, braucht ihr ein Schnipsel Javascript im HEAD-Bereich der Seite.

      Laden wir die vier Bilder der letzten Szene ein.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
          <script type="text/javascript">
          <head>
          <script type="text/javascript">
              /* preload images */
              var img1 = new Image();
              img1.src = "imgs/background.gif";
              var img2 = new Image()
              img2.src = "imgs/cast.gif";
              var img3 = new Image()
              img3.src = "imgs/clouds.png";
              var img4 = new Image()
              img4.src = "imgs/meadow.png";
          </script>
          </head>

      Was passiert? Die HTML-Seite wird vom Browser aufgerufen und die Script-Anweisungen im HEAD werden sofort ausgeführt. Für jedes Bild wird ein Javasscript-Image-Object erstellt und in einer in einer Variablen gespeichert var img1 = new Image(). Diesem Image Object wird der Pfad zu einem Bild zugewiesen var img1.src = „imgs/background.gif“, worauf das Bild sofort geladen wird. Nach dem gleichen Muster können weitere Bilder preloaded werden.

      Interface für CSS3-Animation – Restart, Play und Pause

      Bei einem Trickfilm wünscht sich der User, die Animation mit einem Interface zu steuern. In CSS3 gibt es nur eine Eigenschaft animation-play-state für pause/running – aber keine Eigenschaft für restart. Animation-Restart müsst ihr über eine Schnipsel Javscript und jQuery realisieren. jQuery ist ein hervorragende Javascript Library für die Veränderung von HTML-Elementen und CSS-Eigenschaften. In dem Code werde ich nur die Stellen erklären, die ihr verändern müsst, um das Script für eure Animationen anzupassen.

      Hier meine Empfehlung: Lernt etwas Javascript und jQuery für tolle Webseiten und Apps!

      HTML: Zwei Links mit IDs restart und pause. Mit diesen Links triggern wir die Events – lösen das Javascript aus.

      1
      2
      3
      4
          <div id="stage">
              <div class="position background"><!-->DIVs animation<--></div>
          <a id="restart" href="#">restart</a>
          <a id="pause" href="#">pause</a>

      Javascript: jQuery Library zu fügen.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
          <head>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
              <script type="text/javascript">
                  /* jquery dom ready, now manipulate dom elements */
                  $(function() {
                      /*Wenn der DOM geladen ist, führe Anweisungen in der Klammer aus.
                  }
              </script>
              <!-- weiter Tags für den Header-Bereich
         <head>

      Dieser Schnipsel lädt die Library direkt von der Google Webseite. Ihr braucht jQuery also nicht downloaden!
      Ein jQuery-Script fängt immer mit $(function() { } an und bedeutet: Wenn alle Seitenelemente geladen sind, dann führe aus, was in den geschweiften Klammern steht.

      jQuery 1: Pause-Event

      1
      2
      3
      4
      5
      6
      7
      8
          $(function() {
              // Pause       
              // #pause is the id from the anchor tag
              $("#pause").click(function() {
                 // => add here the classes with animations from your project    
                 $(".clouds,.meadow,.cast").toggleClass("paused");
              });
          }

      Bei Click auf das HTML-Element mit der ID #pause, wende auf die Elemente mit den CSS-Classes .clouds, .meadow, .cast folgenden Befehl an: toggleClass(„paused“) – stelle die CSS-Class .pause an und aus. Die CSS-Class .pause steht im CSS-File und beinhaltet nur eine Zeile animation-play-state:paused;, um die Animation zu pausieren. Um dieses Script anzupassen, müsst ihr die CSS-Classes mit den Namen aus eurem Projekt austauschen.

      jQuery 2: Restart-Event

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
          // jquery dom ready, now manipulate dom elements
          $(function() {
              // Restart
              // #restart is the id from the anchor tag
              $("#restart").click(function() {    
                  // => add here the classes with animations from your project
                  var els = $(".clouds,.meadow,.cast");
                      $.each(els, function(i,v){
                          var me = this;
                          this.style.webkitAnimation = 'none';
                          this.style.mozAnimation = 'none';
                          this.style.oAnimation = 'none';
                          this.style.msAnimation = 'none';
                          setTimeout(function() {
                          me.style.webkitAnimation = '';
                          me.style.mozAnimation = '';
                          me.style.oAnimation = '';
                          me.style.msAnimation = '';
                      }, 10);
                  });
              });
          });

      Das gleiche Muster, nur ist der ausführende Befehl etwas umfangreicher. Diesmal löst der Click auf das Element mit der ID #restart die Befehlsanweisungen aus. Die CSS-Classes, auf die der Befehl angewendet wird, stehen in der Zeile var els = $(‚.clouds,.meadow,.cast‘). In dieser Zeile müsst ihr wieder eure CSS-Classes einfügen.

      Adobe Edge Animation – Software für komplexe CSS3-Animations

      adobe-edge-animate

      Bei Animation wie Trickfilmen, bei denen viele Objekte voneinander abhängig animiert werden, werden handformatierte Animationen – der Code – unübersichtlich. In diesen Fällen sollen Software-Tools wie Adobe Edge Animation helfen. Adobe Edge Animation bietet ein visuelles Interface mit einer Preview der Animation, um intuitiver und schneller zu arbeiten. Diese Software-Tools stecken allerdings noch in den Kinderschuhen.
      Link zu Adobe Edge Animation

      Fazit

      CSS3-Animation bieten faszinierende Möglichkeiten – von kleinen Animationen für Logos oder Buttons bis zu komplexen Trickfilmen. Die Gestaltung von Motion gehört zum Repertoire eines Interaction Designers, um die User Experience einer Webseite oder Application zu gestalten und um eine klare Nutzerführung zu erzeugen.

      Eine CSS3-Animation wird in zwei Schritten erstellt.

      1. Keyframe-Animation erstellen mit frei gewählten Namen und CSS-Eigenschaften.
      2. Keyframe-Animation über Namen HTML-Elementen zuordnen und Eigenschaften definieren.

      Für komplexe Animationen gibt es Software wie Adobe Edge Animaten, welche die Arbeit erleichtert. Doch kleine Animationen und Interfacekomponenten lassen sich meist schneller von Hand erstellen. Mit etwas Javascript und jQuery können Bilder vorgeladen (preloaden) und Animationen gesteuert werden.

      Hier noch mal Beispiele und Code (auch Demos)
      Einfache Loops: Button & Loading Cycle
      Slideshow
      Szene animieren
      Download Code Beispiele & Demos

      Weitere Artikel der 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


5 Kommentare

  1. Posted 23. November 2013 at 22:57 | Permalink

    Danke für deinen Beitrag! Nach so einer Zusammenfassung zu den CSS3 Keyframes und Animationen habe ich gesucht!

    LG Thomas

  2. Posted 31. Januar 2014 at 10:19 | Permalink

    Super Erklärung. werd ich auf jeden Fall benutzen. ^^

  3. Posted 16. Dezember 2014 at 18:26 | Permalink

    Danke für die sehr ausführliche Zusammenstellung und die sehr gute Erklärung, so habe ich die nötige Grundlage um mir Gedanken darüber zu machen wie und ob ich es einsetze auf meiner Webseite.

    Gruß

    Michael

  4. Holger Huber
    Posted 7. Januar 2015 at 21:06 | Permalink

    Ihre Seite war Anlass, mich auf den aktuellen Stand zu bringen. Danke dafuer. Als Amateur schicke ich gerne einen Code, der bei mir rundum auf den meisten Browsern funktionierte. Bin kein Profi und die Zeilen sind kein Hexenwerk. Der eine oder Andere spart vielleicht Zeit.

    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
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
       .button {
            display: inline;
            padding: 8px;
            font: 1em/1.5em Helvetica, Arial;
            color: white;
            letter-spacing: 1px;
            background-color: #749a02;
       -webkit-border-radius:6px;
          -moz-border-radius:6px;
           -ms-border-radius:6px;
            -o-border-radius:6px;
               border-radius:6px;
       -webkit-animation: glowIt 2s infinite;
        -moz-animation: glowIt 2s infinite;
         -ms-animation: glowIt 2s infinite;
          -o-animation: glowIt 2s infinite;
             animation: glowIt 2s infinite;
        }
      /* --- Apple Google Android -- */
      @-webkit-keyframes glowIt
          {
            0% {
                background-color: #749a02;
                -webkit-box-shadow: 0 0 9px #ccc;
            }
            50% {
                  background-color: #91bd09;
                -webkit-box-shadow: 0 0 18px #91bd09;
          100% {
                  background-color: #749a02;
                 -webkit-box-shadow: 0 0 9px #ccc;
                 }
              }
             }
      /* --- -- Mozilla -- */
        @-moz-keyframes glowIt
          {
            0% {
                background-color: #749a02;
                -moz-box-shadow: 0 0 9px #ccc;
            }
            50% {
                  background-color: #91bd09;
                  -moz-box-shadow: 0 0 18px #91bd09;
              }
          100% {
                  background-color: #749a02;
                 -moz-box-shadow: 0 0 9px #ccc;
                 }
              }
      /* --- MS IE -- */
           @-ms-keyframes glowIt
          {
            0% {
                background-color: #749a02;
                -ms-box-shadow: 0 0 9px #ccc;
            }
            50% {
                  background-color: #91bd09;
                  -ms-box-shadow: 0 0 18px #91bd09;
              }
          100% {
                  background-color: #749a02;
                 -ms-box-shadow: 0 0 9px #ccc;
                 }
              }
      /* --- Opera -- */
            @-o-keyframes glowIt
          {
            0% {
                background-color: #749a02;
                -o-box-shadow: 0 0 9px #ccc;
            }
            50% {
                  background-color: #91bd09;
                  -o-box-shadow: 0 0 18px #91bd09;
              }
          100% {
                  background-color: #749a02;
                 -o-box-shadow: 0 0 9px #ccc;
                 }
              }
      /* --- unbekannt -- */
              @-keyframes glowIt
                {
            0% {
                background-color: #749a02;
                box-shadow: 0 0 9px #ccc;
            }
            50% {
                  background-color: #91bd09;
                  box-shadow: 0 0 18px #91bd09;
              }
          100% {
                  background-color: #749a02;
                 -webkit-box-shadow: 0 0 9px #ccc;
                 }
              }

    Vermutlich kann man das auch besser machen.

    Gruss
    Holger Huber

  5. Posted 4. September 2015 at 09:37 | Permalink

    Wer suchet, der findet… toll gemacht und erklärt! Und als Nebeneffekt: das weckt die Lust auf mehr! :-)
    Vielen herzlichen Dank!

Ein Trackback

  1. […] Link: CSS3-Keyframe-Animation […]

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=""> <s> <strike> <strong>