Animation soll am Endpunkt stehen bleiben

AnaElisa · 2. Januar 2020

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

Sempervivum · 2. Januar 2020

animation-fill-mode dürfte dir da weiter helfen:

https://wiki.selfhtml.org/wiki…ation#animation-fill-mode

AnaElisa · 2. Januar 2020

super, danke. Das hat geholfen.

AnaLisa · 29. Januar 2020

Hallo zusammen,

habe noch eine Frage zu dieser Animation:

Der Text soll erst nach den Dreiecken erscheinen. Also, folgender Ablauf. Zunächst sind das blaue und rote Dreieck in der Mitte zusammen als Quadrat, diese öffnen sich und bleiben außen stehen und erst dann erscheint der Text.

Leider schaffe ich es nicht, dies zu realisieren. Kann mich da jemand unterstützen?

Code

<style type="text/css">
body {
    text-align: center;
}
p.slogan {
    text-align: center;
    z-index: 800;
    animation: text 2s;
font-size: 130%;
}
.center {
    z-index: 10;
    position: absolute;
    left: 50%;
    right: 50%;
}
#dreieck-blau {
    width: 0;
    height: 0;
    border-right: 4em solid rgba(48,95,159,0.3);
    border-top: 4em solid rgba(48,95,159,0.3);
    border-bottom: 4em solid transparent;
    border-left: 4em solid transparent;
    animation: blau 5s;
    animation-fill-mode: forwards;
}
#dreieck-rot {
    width: 0;
    height: 0;
    border-left: 4em solid rgba(220,35,40,0.3);
    border-top: 4em solid transparent;
    border-bottom: 4em solid rgba(220,35,40,0.3);
    border-right: 4em solid transparent;
    float: left;
    animation: rot 5s;
    animation-fill-mode: forwards;
}
@keyframes blau {
0% {
transform: translate(0);
}
100% {
transform: translate(13em);
}
}
@keyframes rot {
0% {
transform: translate(0);
}
100% {
transform: translate(-18em);
}
}
@keyframes text {
0% {
font-size: 0%;
opacity: 1;
}
90% {
font-size: 130%;
opacity: 1;
}
100% {
font-size: 120%;
opacity: 1;
}
}
@-webkit-keyframes text {
0% {
color:white;
font-size: 0%;
opacity: 0;
}
90% {
font-size: 130%;
opacity: 1;
}
100% {
font-size: 120%;
}
}
</style>
<div class="center">
    <div id="dreieck-rot"></div>
    <div id="dreieck-blau"></div>
</div>
<div>
  <p class="slogan"><strong>Text Text  </strong>Text Text <br>und <strong>Text Text  
    Text Text Text Text</strong></p>
</div>

Alles anzeigen

Vielen Dank im Voraus.

AnaLisa

Sempervivum · 29. Januar 2020

In dem Fall dürfte dir animation-delay weiterhelfen:

https://wiki.selfhtml.org/wiki…animation#animation-delay

damit kannst Du die einzelnen Animationen verzögern, so dass sich der richtige Ablauf einstellt.

AnaLisa · 29. Januar 2020

Danke für deine Antwort. Mit delay habe ich es schon probiert. Da ist das Problem, dass der Text von Anfang an bereits dasteht und sich nach der eingestellten Zeit nochmal neu aufbaut. Ich möchte aber, dass der Text zum ersten Mal sichtbar wird, nachdem sich die beiden Dreiecke auseinander bewegt haben. Ich hoffe, das ist so verständlich.
Evtl. habe ich auch einen Knoten im Hirn.

Sempervivum · 29. Januar 2020

Versuche, im Ausgangszustand den Text schon unsichtbar zu machen:

Code

        p.slogan {
            text-align: center;
            z-index: 800;
            animation: text 2s;
            animation-fill-mode: forwards;
            animation-delay: 5s;
            font-size: 0%;
            opacity: 0;
        }

Sempervivum · 29. Januar 2020

PS: Vielleicht ist es so hübscher:

Code

        p.slogan {
            text-align: center;
            z-index: 800;
            animation: text 2s;
            animation-fill-mode: forwards;
            animation-delay: 5s;
            font-size: 100%;
            transform: scale(0);
        }

Code

        @keyframes text {
            0% {
                transform: scale(0);
            }

            90% {
                transform: scale(1.3);
            }

            100% {
                transform: scale(1.2);
            }
        }

Alles anzeigen

Sempervivum · 29. Januar 2020

PPS: Etwas eleganter kann man diesen Überschwinger mit einer geeigneten Timing-Function realisieren:

Code

        p.slogan {
            text-align: center;
            z-index: 800;
            animation: text 2s;
            animation-fill-mode: forwards;
            animation-delay: 5s;
            animation-timing-function: cubic-bezier(.17, .67, .72, 1.32);
            font-size: 100%;
            transform: scale(0);
        }

Code

        @keyframes text {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1.2);
            }
        }

AnaElisa · 30. Januar 2020

ja, das hat geklappt. Ich bin fasziniert. DANKE!

Animation soll am Endpunkt stehen bleiben

Jetzt mitmachen!

Teilen

Tags