[ERLEDIGT] [Frage] CSS- Ende einer Animation

[shrimpfriend]

Hallo,
ich möchte, dass eine CSS- Animation nachdem sie abgelaufen ist in ihrem Endzustand bleibt.

@keyframes slidein{
        0%{
        top: -30%;
        left: 35%;
        }
        100%{
        top: -5%;
        left: 35%;
        }
.bulb{
        left: 35%;
        top: -30%;
        position: absolute;
       }
*:hover .bulb{
        animation-name: slidein;
        animation-duration: 2s;

<figure class="bulb"> <img alt="" src="b24c6ec8e0large.png"> </figure>

Das ist mein jetziger Code; das Bild wird langsam nach unten geschoben, sobald der Mauszeiger auf der Seite ist. Sobald ich die Seite aber mit dem Zeiger verlasse springt das Bild zurück nach oben. Lässt sich das verhindern?

Vielen Dank im Voraus,
shrimpfriend

 

[Tronjer]

In dem du den Anfangszustand auf den Endzustand setzt.

 

[shrimpfriend]

Ich steh echt auf´m Schlauch; wie geht das?

 

[Tronjer]

Ich habe so etwas vor längerer Zeit mal gemacht, allerdings nicht in Verbindung mit :hover. Gib mal .bulb die Werte, die deine keyframes bei 100% haben.

 

[shrimpfriend]

Dann bleibt das Bild nach der Animation natürlich unten; ist aber eben auch schon VOR der Animation unten. D.h. es springt bei mouseover nach oben und geht dann in Folge der Animation nach unten.....

 

[Tronjer]

Wie wäre es mit transition?

http://www.w3schools.com/css/css3_transitions.asp

 

[shrimpfriend]

Mit transition ist doch das Problem das gleiche, oder hab ich da was übersehen?

 

[scbawik]

Mit transition ist doch das Problem das gleiche, oder hab ich da was übersehen?

Nein, genau dafür sind transitions (Übergänge) da.
http://jsfiddle.net/ajkmk102/

 

[shrimpfriend]

Nein, genau dafür sind transitions (Übergänge) da.
http://jsfiddle.net/ajkmk102/

Die Box springt aber immer noch nach Ende der Bewegung zurück, sobald die Maus das Fenster verlässt...

 

[scbawik]

Die Box springt aber immer noch nach Ende der Bewegung zurück, sobald die Maus das Fenster verlässt...

Nun gut, dann ist das meiner Meinung nach keine CSS Aufgabe auch wenn es vielleicht möglich wäre.

Ich würde einfach per JS auf das MouseOver-Event warten und dann einmalig eine CSS Klasse hinzufügen. Das ist flexibler für zukünftige Anpassungen.

Denn wie man eine Seite aufrufen kann, ohne mit der Maus den Viewport zu berühren ist mir sowieso ein Rätsel.

 

[shrimpfriend]

Ich würde einfach per JS auf das MouseOver-Event warten und dann einmalig eine CSS Klasse hinzufügen. Das ist flexibler für zukünftige Anpassungen.

Nagut, dann eben doch mit JS.
Vielen Dank für eure Hilfe!