Hallo zusammen,
ich hoffe, ich bin hier richtig. Ich habe ein Problem mit einer kleinen Animation. Leider kenne ich mich nicht sehr gut damit aus.
Bei folgender Animation sollen die beiden Dreiecke nach der Animation am Endpunkt stehenbleiben und nicht zum Ausgangspunkt zurückkehren. Kann mir da jemand einen Tipp geben. Danke.
Code
<div class="center">
<div id="dreieck-rot"></div>
<div id="dreieck-blau"></div>
</div>
<style type="text/css">
.center {
width: 140px;
margin-left: auto;
margin-right:auto;
}
#dreieck-blau {
width: 0;
height: 0;
border-right: 70px solid #a1b7d0;
border-top: 70px solid #a1b7d0;
border-bottom: 70px solid transparent;
border-left: 70px solid transparent;
animation: blau 5s;
}
#dreieck-rot {
width: 0;
height: 0;
border-left: 140px solid #ef9c9a;
border-top: 140px solid transparent;
border-bottom: 140px solid #ef9c9at;
border-right: 140px solid transparent;
top:-140px;
float:left;
animation: rot 5s;
}
@keyframes blau {
0% {
transform: translate(0);
}
100% {
transform: translate(25em);
}
}
@keyframes rot {
0% {
transform: translate(0);
}
100% {
transform: translate(-25em);
}
}
Alles anzeigen