Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 287

7
Abbildung 7.12 Ein kurzer Ausschnitt der Animation beim Abhaken einer Aufgabe
@-webkit-keyframes erledigt {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
Diesen verknüpfen Sie jetzt mit der Klasse done , also den abgehakten Listenelementen:
li.done {
right: 0;
left: 0;
background-color: #0c0;
position: relative;
-webkit-animation-name: erledigt;
-webkit-animation-duration: 1s;