Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Sponsored Post: Bewegung! Mit CSS3 Animations

Rund um HTML5 gibt es viele neue Features, insbesondere technischer Natur. Dabei wird das Optische gerne vergessen, denn CSS3 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>

Finde einen Job, den du liebst

5 Reaktionen
Michael
Michael

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
Michael
Michael

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
andi
andi

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
Matze
Matze

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

Antworten
El Gringo
El Gringo

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen