• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

nach animation an letzter stelle stehenbleiben

TecEye

TecEye

New member
Code: 
@-webkit-keyframes pin_in {
			0%   { margin-top:0px; transform: rotate(45deg); }
			40%  { margin-top:0px; transform: rotate(-45deg); }
			60%  { margin-top:0px; transform: rotate(-45deg); }
			100% { margin-top:13px; transform: rotate(-45deg); }
		}
		.pin div { transform: rotate(45deg); margin-top:0px; }
		.pin:hover div{ -webkit-animation-name: pin_in; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; }

Also ich hab n font-icon, ein PIN der sich beim hovern nach unten dreht und dann via margin quasi ins blatt steckt (zum anpinnen)
Kann leider keine fiddle machen, weil kp wie ich da mein font-icon reinbekommen soll.
Naja ich will dass die animation halt an der letzten stelle stehen bleibt, momentan springt sie jetzt wieder an den anfang :(
 
ok hab es zusätzlich eingefügt, kann ja nicht schade, aber denke das -webkit-animation-fill-mode: forwards, none; das Ausschlaggebende war.
Geht jetzt soweit, aber ich hab gegooglet und nix gefunden, bzw nur jquery hacks, kann man mit reinem css3 nicht sagen dass beim hover out die animation revers läuft?
Code: 
@-webkit-keyframes pin_in {
			0%   { margin-top:0px; transform: rotate(45deg); }
			40%  { margin-top:0px; transform: rotate(-45deg); }
			60%  { margin-top:0px; transform: rotate(-45deg); }
			100% { margin-top:13px; transform: rotate(-45deg); }
		}
		@-webkit-keyframes pin_out {
			0%   { margin-top:13px; transform: rotate(-45deg); }
			40%  { margin-top:0px; transform: rotate(-45deg); }
			60%  { margin-top:0px; transform: rotate(-45deg); }
			100% { margin-top:0px; transform: rotate(45deg); }
		}
		.pin div { transform: rotate(45deg); margin-top:0px; color:rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease; }
		.pin:hover div{ margin-top:13px; transform: rotate(-45deg); color:#1a538e; -webkit-animation-name: pin_in; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards, none; }
		.pin_activ div { transform: rotate(-45deg); margin-top:13px; color:#1a538e; -webkit-transition: all 0.5s ease; }
		.pin_activ:hover div{ margin-top:0px; transform: rotate(45deg); color:rgba(0,0,0,0.2); -webkit-animation-name: pin_out; -webkit-animation-duration: 0.5s;  -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards, none; }

P.S.: die zwei classen werden nach .click() gewechselt
 
dann startet sie schon zuanfang ohne mein zutun. sie springt quasi an die stelle wo sie enden sollte und läft dann zum eigentlichen ausgangspunkt
 
Mist...

So wie es aussieht, musst du ein bisschen JS hinzufügen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
@keyframes pin_in {
	0%   { margin-top:0px; transform: rotate(45deg); }
	40%  { margin-top:0px; transform: rotate(-45deg); }
	60%  { margin-top:0px; transform: rotate(-45deg); }
	100% { margin-top:13px; transform: rotate(-45deg); }
}
@keyframes pin_out {
	0%   { margin-top:13px; transform: rotate(-45deg); }
	40%  { margin-top:0px; transform: rotate(-45deg); }
	60%  { margin-top:0px; transform: rotate(-45deg); }
	100% { margin-top:0px; transform: rotate(45deg); }
}
.pin {
	width: 2em;
	height: 2em;
	color:rgba(0,0,0,0.2);
	transition: all 0.5s ease;
	border: 1px solid black;
	animation-name: pin_out;
	animation-duration: 0s;
	animation-fill-mode: both;
}
.pin.hovered {
	animation-duration: 0.5s;
}
.pin:hover {
	color:#1a538e;
	animation-duration: 0.5s;
	animation-name: pin_in;
	animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="pin">a</div>
<script>
Array.prototype.slice.call(document.getElementsByClassName("pin")).forEach(function(pin){
	pin.addEventListener("mouseover", function hover(){
		this.className += " hovered";
		this.removeEventListener("mouseover", hover, false);
	}, false);
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben