Java Reference
In-Depth Information
}
@keyframes fade {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
#box {
background: red; color: white; width: 100px;
animation: fade 5s ininite;
-moz-animation-name: fade; -moz-animation-duration: 5s;
-moz-animation-iteration-count: ininite;
-webkit-animation-name: fade; -webkit-animation-duration: 5s;
-webkit-animation-iteration-count: ininite;
}
Was passiert im obigen Beispiel? Innerhalb einer Zeitspanne von fünf Sekunden wird hier
die fade genannte Animation ausgeführt. Die Transparenz des Objekts mit der ID box wird
beim Start auf 0.1 festgelegt und endet auch wieder bei diesem Transparenzwert. Bei der
Hälte der Animation, also nach 2,5 Sekunden, wird die Transparenz auf 1 gesetzt. Diese
Animation wird unbegrenzt wiederholt ( ininite ). Soll die Animation nur einmalig ausge-
führt werden, kann die Angabe entfallen (Standard) und bei einer numerischen Angabe
können Sie die Anzahl der Wiederholungen festlegen.
Nun sehen Sie in dem Beispiel redundante Angaben, was aber dafür gedacht ist, dass Brow-
ser ohne vollständigen Support von CSS3 möglicherweise mit den proprietären Speziikati-
onen für Mozilla oder Webkit etwas anfangen können. Wenn CSS3 vollständig unterstützt
wird, brauchen Sie nur die fett markierten Zeilen in der Datei für die Animation und darauf
werden wir uns im nächsten Beispiel beschränken. Natürlich lassen sich auch verschiedene
CSS-Eigenschaten kombinieren, so zum Beispiel Sichtbarkeit ( opacity ) und Skalierung
( transform: scale ), Verschiebung ( transform: translate ) und Rotation ( transform:
rotate ).
Listing 14.67■ Komplexere Animationen mit CSS3
@keyframes ani1 {
0% { opacity: 0.1; transform: scale(1.0); }
25% { transform:translate(100px, 200px);}
50% { opacity: 1; transform: scale(2.5); }
75% { transform: scale(1.0);}
100% { opacity: 0.1; transform:translate(0px, 0px);}
}
@keyframes ani2 {
0% { transform: translate(100px, 0px) rotate(0deg) scale(1.0); }
55% { transform:translate(200px, 200px) rotate(45deg) scale(5);}
100% { transform: translate(100px, 0px) rotate(0deg) scale(1.0);}
}
#box1 {
background: red; color: white; width: 100px; animation: ani1 10s ininite;
}
#box2 {
background: green; color: white; width: 100px; animation: ani2 20s ininite;
}
 
Search WWH ::




Custom Search