Animationen mit CSS umsetzen

CSS3 ist beinahe in der Lage Javascript zu ersetzen: Mittels CSS lassen sich beispielsweise über Transformationen Animationen zaubern, die durch wenig Einsatz einen großen Effekt beim Betrachter erzielen können.

This is my heartbeat

Das animierende Element ist in diesem Fall ein div mit der ID heartbeat:

<div id="heartbeat">
<img src="/_img/tutorials/heart.png" alt="This is my heartbeat" />
</p>

Im Stylesheet weisen wir diesem div dann die Transformation zu:

#heartBeat{
animation-name: heartBeat;
-webkit-animation-name: heartBeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: 2;
-webkit-animation-iteration-count: 2;
animation-delay: 3;
-webkit-animation-delay: 3;
}

@keyframes heartBeat {
0% {
transform: scale(none);
-webkit-transform: scale(none);
}

20% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}

30% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}

45% {
transform: scale(1.25);
-webkit-transform: scale(1.25);
}

50% {
transform: scale(none);
-webkit-transform: scale(none);
}

100% {
transform: scale(none);
-webkit-transform: scale(none);
}
}

@-webkit-keyframes heartBeat {
0% {
transform: scale(none);
-webkit-transform: scale(none);
}

20% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
30% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}

45% {
transform: scale(1.25);
-webkit-transform: scale(1.25);
}

50% {
transform: scale(none);
-webkit-transform: scale(none);
}

100% {
transform: scale(none);
-webkit-transform: scale(none);
}
}

Dieses Tutorial bewerten

zurück

Navigation einschalten