Ben: hover-Problem beim Seitenstart

SELF-Forum

hover-Problem beim Seitenstart

Ben
– Informationen zu den Bewertungsregeln

Hallo liebe Netzgemeinde,

Ich bin derzeit am verzweifeln. Ich habe eine hover-Animation mit css programmiert, und sie funktioniert auch soweit ganz gut.
Wenn man mit der Maus über das Objekt fährt, wird der "swirl_in"-Effekt gestartet. Und beim Verlassen der "swirl_out"-Effekt.

Aber wie verhindere ich, das bereits beim Start der Seite der "swirl_out"-Effekt gestartet wird?
Hier eine vereinfachte Version (weniger keyframes, delays, etc):

  
@keyframes swirl_out{  
	0%  { transform: rotate(0); opacity: 1; width: 60px; height: 120px;}  
	100%{ transform: rotate(360deg); opacity: 0; width: 0px; height: 0px; left: 50px;}  
}  
@keyframes swirl_in{  
	0%  { transform: rotate(360deg); opacity: 0; width: 0px; height: 0px; left: 50px;}  
	100%{ transform: rotate(0); width: 60px; height: 120px; }  
}  
.swing_container:hover .swing{  
	-webkit-animation: swirl_in 1s ease-in-out ;  
	-moz-animation:    swirl_in 1s ease-in-out ;  
	animation:         swirl_in 1s ease-in-out ;  
	-webkit-transform-origin: 50% 50%;  
	-moz-transform-origin:    50% 50%;  
	transform-origin:         50% 50%;  
	top:      0px;  
	left:     0px;  
	width:   60px;  
	height: 120px;  
}  
.swing_container {  
	position: absolute;  
	width: 500px;  
	height:300px;  
	left:  200px;  
	border: 1px solid #000;  
}  
  
.swing{  
	border: 1px dashed #000;  
	-webkit-animation: swirl_out 1s ease-in-out;  
	-moz-animation:    swirl_out 1s ease-in-out;  
	animation:         swirl_out 1s ease-in-out;  
	-webkit-transform-origin: 50% 50%;  
	-moz-transform-origin:    50% 50%;  
	transform-origin:         50% 50%;  
	position: absolute;  
	top:      0px;  
	left:     0px;  
	width:    0px;  
	height:   0px;  
}  


  
</head>  
<body>  
  <div class="swing_container">  
    <div class="swing"></div>  
  </div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. hover-Problem beim Seitenstart

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Ben:

    nuqneH

    Aber wie verhindere ich, das bereits beim Start der Seite der "swirl_out"-Effekt gestartet wird?

    „css transition load“ könnten gute Suchbegriife sein. Und siehe da: Das sind sie auch.

    Hier eine vereinfachte Version (weniger keyframes, delays, etc):

    Fürs nächste Mal: Online-Beispiel, bitte.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln