Drücke die Tasten ◄ ► für weitere Artikel  

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>
Sponsored Post (Was ist das?)
13 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von El Gringo am 11.07.2012 (15:10Uhr)

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

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

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

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

    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.

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

    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.

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

    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 :(

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS3
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

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

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

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Kennst Du schon unser t3n Magazin?

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