Vorheriger Artikel Nächster Artikel

Sponsored Post: Bewegung! Mit CSS3 Animations

Rund um gibt es viele neue Features, insbesondere technischer Natur. Dabei wird das Optische gerne vergessen, denn bringt ebenfalls zahlreiche interessante Neuerungen wie etwa Animationen. Früher gab es hübsche Websites sowie Websites mit Funktionalität. Heutzutage ist das anders, beides muss stimmen. Aus diesem Grund wird auch die intradisziplinäre Zusammenarbeit von Designern und Entwicklern immer wichtiger.

CSS3 ist als Standard noch nicht verabschiedet, moderne Browser unterstützen jedoch bereits heute einen Großteil der Neuerungen. Mit einer der komplexesten Aspekte ist der Bereich „CSS3 Animations“. Mit CSS-Stilangaben ist es jetzt tatsächlich möglich, per Stilangaben eine Animation durchzuführen. Streng technisch gesehen ist eine Animation eine kontinuierliche Veränderung einer Eigenschaft innerhalb eines Zeitraums. Diese Eigenschaft kann im Bereich CSS vielerlei Gestalt annehmen, etwa die x-Koordinate eines Elements (dann ist die Animation eine Bewegung) oder eine Farbe (dann wäre die Animation eine graduelle Farbveränderung) oder eine Transformation (in diesem Fall würde ein Element beispielsweise gedreht werden).

Das prinzipielle Vorgehen ist hierbei wie folgt: die CSS3-Regel @keyframes gibt an, aus welchen einzelnen Zuständen die Animation besteht. Folgender Regelsatz etwa definiert den Rotationswinkel, die Position sowie die Durchsichtigkeit während Beginn, Hälfte und Ende eines Animationsablaufs:

@keyframes ani {
   0% {
      opacity: 1.0;
      transform: rotate(0);
      top: 0px;
      left: 0px;
      }
   50% {
      opacity: 0.25;
      transform: rotate(180deg);
      top: 200px;
      left: 300px;
      }
   100% {
      opacity: 1.0;
      transform: rotate(0);
      top: 0px;
      left: 0px;
      }
}
Die Animation ist also vorerst komplett unabhängig davon was animiert werden soll. Über den Bezeichner nach @keyframes lässt sie sich dann auf Elemente anwenden, etwa wie folgt:
img.logo {
   top: 0px;
   left: 0px;
   animation: ani 5s 1s ease-in-out infinite;
   position: absolute;
}
Die per Selektor ausgewählte Grafik wird mit der angegebenen @keyframes-Regel animiert, und zwar fünf Sekunden lang. Durch das „Easing“ ist die Animation nicht linear sondern wirkt etwas natürlicher: am Anfang etwas beschleunigt, am Ende verlangsamt.

Die Abbildungen zeigen verschiedene Zwischenstufen der Animation im Internet Explorer 10 (als Teil der Windows 8 Release Preview). Das komplette Listing enthält auch einige Kompatibilitäts-Anweisungen für Webkit- und Mozilla-Browser.

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3</title>
      <style>
         @keyframes ani {
            0% {
               opacity: 1.0;
               transform: rotate(0);
               top: 0px;
               left: 0px;
               }
            50% {
               opacity: 0.25;
               transform: rotate(180deg);
               top: 200px;
               left: 300px;
               }
            100% {
               opacity: 1.0;
               transform: rotate(0);
               top: 0px;
               left: 0px;
               }
         }
###
         @-moz-keyframes ani {
            0% {
               opacity: 1.0;
               -moz-transform: rotate(0);
               top: 0px;
               left: 0px;
               }
            50% {
               opacity: 0.25;
               -moz-transform: rotate(90deg);
               top: 200px;
               left: 300px;
               }
            100% {
               opacity: 1.0;
               -moz-transform: rotate(0);
               top: 0px;
               left: 0px;
               }
         }
###
         @-webkit-keyframes ani {
            0% {
               opacity: 1.0;
               -webkit-transform: rotateZ(0);
               top: 0px;
               left: 0px;
               }
            50% {
               opacity: 0.25;
               -webkit-transform: rotateZ(90deg);
               top: 200px;
               left: 300px;
               }
            100% {
               opacity: 1.0;
               -webkit-transform: rotateZ(0);
               top: 0px;
               left: 0px;
               }
         }
###
         img.logo {
            top: 0px;
            left: 0px;
            animation: ani 5s 1s ease-in-out infinite;
            -moz-animation: ani 5s 1s ease-in-out infinite;
            -webkit-animation: ani 5s 1s ease-in-out infinite;
            position: absolute;
         }
      </style>
   </head>
   <body>
      <img alt="Logo" src="logo.png">
   </body>
</html>
NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von El Gringo am 11.07.2012 (15:10 Uhr)

    Immer schön wenn Tutorials ohne Demo-Seite geliefert werden.

    Antworten Teilen
  2. von Matze am 12.07.2012 (09:59 Uhr)

    Wie wäre es mit Links? Was an diesem Post "sponsored"?

    Antworten Teilen
  3. von andi am 12.07.2012 (11:04 Uhr)

    Ich denke, der Post ist von Microsoft, deswegen sponsored. Er zeigt, was so alles mit dem IE möglich ist. Finde es aber auch schade, dass man dies nicht dazu schreibt.

    Antworten Teilen
  4. von Michael am 13.07.2012 (14:10 Uhr)

    Was ist daran so schwierig mal eine Demo von dem Kram darzustellen? Das wurde doch in letzter Zeit schon oft genug angemerkt..Verstehe ich nicht! So nen blöden Artikel ohne Beispiel kann man sich sparen.

    Antworten Teilen
  5. von Michael am 13.07.2012 (14:21 Uhr)

    Ich habe mir das mal kopiert und eine Grafik erstellt.
    Ergebnis: Die CSS3-Animation funzt weder im Opera 12, FF 13, Chrome 246 oder im IE9. Den IE 10 habe ich nicht! toll :(

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen