Ich versuche hier gerade animation und transform zusammenzubringen - bisher leider vergeblich.
Und zwar geht es mir darum, dass ein Objekt beim Laden der Seite rotiert und anschließend im rotierten Zustand verbleibt. Leider kehrt die Box nach dem Ende der Animation wieder zu ihrem Ausgangszustand zurück
Hätte da jemand vielleicht einen Ansatz?
Hier der Code für FF:
Und zwar geht es mir darum, dass ein Objekt beim Laden der Seite rotiert und anschließend im rotierten Zustand verbleibt. Leider kehrt die Box nach dem Ende der Animation wieder zu ihrem Ausgangszustand zurück
Hätte da jemand vielleicht einen Ansatz?
Hier der Code für FF:
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#text {
position: relative;
background: black;
color: white;
height: 150px;
top: 50px;
left: 50px;
width: 300px;
}
.text {
-moz-animation-duration: 3s;
-moz-animation-name: text;
}
@-moz-keyframes text {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(45deg) translate(150px);
}
}
</style>
</head>
<body>
<div id="text" class="text">Das ist ein Text</div>
</body>
</html>
