Gehen CSS-Animationen auch rückwärts nach Hover?

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?

2 Antworten

Erzesel

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

03.09.2022, 13:29

Ja geht.

Das Zauberwort heißt CSS Transition.

JFhatFragen2

Fragesteller

03.09.2022, 14:13

Danke!

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

03.09.2022, 14:57

Gehen CSS-Animationen auch rückwärts nach Hover?

<style>
div {
background:red;
width:100px;
height:100px;
transition:all 1s
}
div:hover {transform:scale(2)}
</style>
<div></div>

Alex

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

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?

...zur Frage

CSS Hover Animation "einmalig"?

Hallo, ich möchte eine :hover transition so einstellen, dass wenn sie einmal getriggert wurde nicht mehr gestoppt wird einfach bis zum Ende läuft und dann so bleibt. Wie realisiere ich das am einfachsten? LG

...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 :hover anderes Element wählen?

Hallo,

Ich bin mir nicht sicher ob sich hier jemand mit auskennt aber ich probier es trotzdem mal.

Also vor kurzen hab ich mit html und css angefangen, jetzt habe ich eine <ul>(Element2) erstellt und darunter noch eine weitere <ul>(Element2) : sprich, wenn man mit dem cursor daruf geht (:hover) so öffnet sie sich.

Was ich machen wollte ist, wenn man auf der zweiten <ul> drauf ist so soll die erste eine andere Farbe bekommen, sodass man erkennt auf welcher man sich gerade befindet.

Eigentlich müsste es doch so gehen

Element2:hover > Element1 {

color: red;

}

Normal funktioniert das ja auch bei anderen Sachen.

Das Zeichen ">" bedeutet doch, dass dann auf dieses Sache zugegriffen wird?

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...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

Animation erstellen - Bild zuerst mittig, anschließend "fließt" Text heraus?

Hallo Community, ich denke ihr habt am Titel schon ungefähr gelesen worum es geht. Ich möchte gerne eine Animation erstellen. Am besten eine per CSS, damit ich sie in allen Webseiten verwenden kann. In der Animation soll zuerst mein Logo (also ein Bild) zusehen sein. Anschließend rückt das Bild ein Stück nach Rechts und nach Links hin "fließt" ein Text neben dem Bild ein. Es soll dann letztendlich "Producted by [Bild]" dastehen.

Wie mache ich das? Die Animation soll nur beim mit der Maus drüber schweben angezeigt werden! Also wie :hover bei CSS.

Viele Grüße!

...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

Hilfe beim Programmieren?

Hallo,

Ich bin Anfänger beim Programmieren mit Javascript css und html

Ich möchte gerade mit dem :hover Effekt einen Buchstaben vergrößern. Wenn sie dieser Buchstaben aber vergrößert verschiebt er die anderen Buchstaben. Was muss ich machen damit das nicht passiert?

...zur Frage

mit :hover Text hervorheben?

Hi, ich will, dass zum Beispiel ein Link, wenn man über ihn fährt mit der maus größer und unterstrichen wird. Das geht ja zum Beispeil mit

a:hover {
  text-decoration: underline;
  font-size: 200%;
}

Das funktioniert auch gut, ich will aber dass dabei eine kleine Animation passiert. Der Strich soll sich von links nach rechts "aufbauen" und die Schrift soll langsam größer werden. Wie kann man das mit nur css machen?

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

...zur Frage

Wie HTML Animation die aus verschiedenen Dateien besteht einbinden?

Ich habe eine interaktive HTML Animation bekommen. Dieser Ordner besteht aus vielen verschiedenen dateien. Bilder, Videos, CSS, JS. Ich möchte diese Animation nun auf meiner Website einbinden.

Ich bin ehrlich gesagt etwas überfordert. Ich weiß wie ich HTML Code einbinde etc. Aber nicht ein Content Element welches sich aus vielen verschienden Dateien zusammensetzt.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen