Wie kann man für ein HTML-Objekt 2 CSS-Keyframe-Animationen abspielen lassen?

Also ich möchte, dass das Objekt, bspw. ein Quadrat, das unsichtbar ist, zuerst langsam erscheint und in der nächsten Animation sich dann unaufhörlich bewegt. Das alles möchte mithilfe von CSS-Keyframes machen.

Wie geht das?

2 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

21.02.2020, 15:52

Probiers mal mit multistep-transitions:
https://css-tricks.com/using-multi-step-animations-transitions/

Woher ich das weiß:Berufserfahrung

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

21.02.2020, 16:00

Du kannst 2 Animationen anlegen und nacheinander aufrufen.
Notfalls über JavaScript, könnte aber auch ohne gehen, müsste ich selbst ausprobieren.

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

HTMLBOI

Fragesteller

21.02.2020, 16:09

Das habe ich versucht, klappt aber bei mir nicht

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zur Frage

CSS keyframe Animation über JS mehrmals abspielen lassen?

Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:

<head>
    <title>Beispiel</title>
    <style>
        #y {
            height: 50px;
            position: relative;
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        #y:active{
            animation: showEffect 0.5s;
        }
    @keyframes showEffect {
        0% {
            content: 'ICH';
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        20% {
            top: 10;
            color: rgba(100, 100, 100, 1);
        }
        100% {
            top: 0;
            color: rgba(100, 100, 100, 0);
        }
    }
    </style>
</head>
<body>
    <div id="container" align="center">
        <div id="y"></div>
        <br>
        <br>
        <input type="button" value="On" onclick="showEffect()">

        <script>
            function showEffect() {
                var on = 1;
                if (on == 1) {
                    document.getElementById('y').innerHTML = "A";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 0;
                } else {
                    document.getElementById('y').innerHTML = "B";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 1;
                }
            }
        </script>
    </div>
</body>

...zur Frage

css Animation erst abspielen wenn im Sichtfeld?

Wie kann man eine Snimation mit css erst abspielen lassen, wenn diese in den viewport (sichtfeld) kommt, und nicht direkt, wenn die Seite geladen wird?

und das ganze ohne Javascript oder externe programme...

...zur Frage

CSS Animation von Oben nach Unten durchlaufen lassen?

Hallo liebe Forumleser :)

Ich würde gerne einen Text von Oben nach Unten durchlaufen lassen :), am besten mit CSS - da Marquee nicht mehr Aktuell ist.

Ich bin noch Anfänger was CSS angeht :)

Ich habe es bisher geschafft den Text vom gewünschten Platz von Oben nach Unten laufen zu lassen, jedoch läuft der Text nicht DURCH sondern setzt sich (wenn das erste Wort den Endpunkt erreicht hat) wieder auf den Startpunkt zurück. Wie verhindere ich das zurücksetzen und mache ein Durchlaufen daraus?

Dankeschön an alle.

Schöne Woche noch!

.object {
    animation: MoveUpDown 5s linear infinite;
    position: absolute;
    left: 0;
    bottom: 0;
}
@keyframes MoveUpDown { 0% { bottom: 70%; } 100% { bottom: 20%; }

...zur Frage

HTML / CSS Animation funktioniert nicht?

Guten Tag

Ich will eine einfache animation von 3 Icons auf der Seite welche sich animieren. Nun habe ich das Plugin Lazy Line Painter gefunden. Wenn ich nur 1 Objekt/ oder animation erstelle funktioniert es. Sobald ich mehrere Animationen auf der Seite haben will funktioniert nur eines der beiden.

Hier findet ihr die Webseite dazu:

http://test.mediadesign.plus

Vielen herzlichen Dank!

...zur Frage

Css Animation bleibt nicht so am ende wie gewünscht?

Warum resettet sich das immer zurück auf width 10% obwohl ich immernoch den Focus auf dem Element #i habe

#i{
    width: 10%;
}
#i:focus{
    animation: tap 2s;
}
@keyframes tap {
    from{width:10%}
    to{width: 20%;}
}
<input type="text" id="i">

Also das soll ein input feld sein das dann halt bisschen breiter werden soll wenn man draufklickt.

Und wenn man es verlässt soll es wieder auf den normalzustand.

...zur Frage

blender - wie Objekte sichtbar/unsichtbar machen auf timeline?

hallo,

kann jemand sagen, wie man im Animationsprogramm Blender Objekte unsichtbar und wieder sichtbar macht und dieses in einer Animation auch so darstellen kann, also als keyframe setzten?

Danke

...zur Frage

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

...zur Frage

Blender Animation Keyframes Bug?

Hey ^^,

Ich habe mich heute mal versucht etwas in Blender und die Animationen hineinzufuchsen und sitze leider nun schon seit etwas längerer Zeit an einem Problem.

Vorab: Ich nutze aktuell das Offizielle Rain-Model von Blender zum Animieren.

Jetzt zu meinem Problem: Jedes mal, wenn ich einen Keyframe erstelle und danach Teile von Rain herumschieben möchte um einen neuen Keyframe zu erstellen wird mein erster auf einmal einfach gelöscht. Dazu sei gesagt: Ich drücke I (für Keyframe), wähle Location & Rotation aus, habe dann unten in der Timeline an meiner ausgewählten Stelle einen gelben "Diamant", gehe dann in der Timeline zu einer neuen Stelle und fange an Rain zu verändern damit ich einen neuen Keyframe erstellen kann.

Fehlt mir da was in meiner Abfolge oder ist das ein Bug von Blender oä.?

Danke schonmal im Vorraus ^^

...zur Frage

JavaScript Text animation?

Hi,

ich will so eine Text-Animation auf einer Seite, wo Zitate durch die Seite gehen. Von Links nach rechts. Wenn das jeweilige Zitat dann auf der rechten Seite der Seite angekommen ist, sollte es wieder auf der linken Seite erscheinen. Hat jemand eine Idee wie man das machen könnte? Ich habe es mit "Keyframes" in "Css" ausprobiert, aber wenn ich mehrere Zitate mit unterschiedlicher Länge benutze, verändert sich das Tempo der jeweiligen Sätze, obwohl ich die "animation-duration" festgelegt habe.

Vielen Dank für Eure Hilfe!

...zur Frage

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zur Frage

Wie funktioniert die Ladeanimation in html?

Guten Morgen,Ich habe eine Webanwendung welche beim Aufruf verschiedener Unterseiten Scripte ausführt. Nun möchte ich dass eine Ladeanimation erscheint sobald ich die Unterseite aufrufe und diese soll erst beendet werden sobald das Script fertig ausgeführt wurde. Habe bereits eine geeignete Animation gefunden und implementiert, nur weis ich nicht wie man diese jetzt aufruft, denn von allein funktioniert das nicht. Habe ein div spinner mit den Attributen und noch webkitkeyframes für die Animationen, wie kann man der Animation angeben wann sie beginnen soll und wann sie sich beenden soll?

Hier der code in css: (html code beinhaltet nur ein div spinner)

...zur Frage

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zur Frage

CSS @keyframes-Animation funktioniert nicht. Wer kann helfen?

Ich habe eine class definiert:

die beispielsweise die id "#before-content4" hat das sind hübsche Boxen mit einem hover Effekt. (opacity von 0.6 auf 1)

Nun möchte ich dass diese Boxen noch eine fade-in DOWN Animation bekommen....ich weiß nur nicht wie ich das jetzt verwursten muss. Ich habe leider nicht so viel Ahnung von CSS wie ich gern hätte -.-

Der code dazu: .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }

@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen