Mit Transform und Transition wurden in den letzten beiden Webdesign-Workshops schon sehr spannende CSS Eigenschaften vorgestellt. In diesem Artikel geht es nun um CSS Animationen…
Let‘s do the Animation:
Animationen mit CSS3 sind auch möglich. Für die folgenden Experimente erstellen wir wieder auf einer neuen Webseite einen Artikel mit einer kleinen Box…
<p>
<div id=“box1″>
</div>
</p>In der CSS-Datei steht nun folgendes…:
@-webkit-keyframes boxAnimation{
0%{
margin:0 0 0 0px;
-webkit-transform:rotate(0deg);
background-color:#999;
}
25%{
margin:0 0 0 800px;
-webkit-transform:rotate(360deg);
}
50%{
margin:500px 0 0 800px;
-webkit-transform:rotate(0deg);
border-radius:180px;
background-color:#f00;
}
75%{
margin:500px 0 0 0px;
-webkit-transform:rotate(360deg);
background-color:#0f0;
}
100%{
margin:0 0 0 0;
-webkit-transform:rotate(0deg);
border-radius:0px;
background-color:#999;
}
}
#box1{
width:120px;height:120px;background:#999;
-webkit-animation-name:boxAnimation;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-iteration-count:infinite;
}Eingefügt habe ich diese CSS Anweisungen in die artikel.css-Datei. Das Ergebnis ist jetzt, das sich auch der ganze Artikel in der Höhe permanent ändert und sich der Animation anpasst.
Die div-Box kann aber sicher auch anders positioniert werden und würde dann auch funktionieren.
Dieser Artikel sollte die CSS Eigenschaft Animation nur vorstellen…Wie man die nun vernünftig in eine Webseite einbaut steht auf einem anderen Blatt. Wer Ideen und Vorschläge hat, kann diese gerne als Kommentar hinterlassen…