Toggle nur jedes zweite mal
Hallo, hab ein kleines Problem (mal wieder haha…) zwar habe ich eine Art hover Effekt geschrieben, der auch einen Effekt abfeuern soll, wenn ich wieder mit der Maus runtergehe, deswegen überhaupt javascript.. Aber ich habe das Problem, dass es nur bei jedem zweiten Mal drüber hovern erst funktioniert… warum ist das so und wie kann ich es lösen? :)
Es sind Bilder in Kreisform … Sie sollen aufblenden dies geschieht mit einer CSS Animation in einer klasse.. Und eine gegenteilige klasse die dann ausgelöst werden soll, wenn ich mit der Maus wieder runtergehe…
Der hier verwendete Code
<style>
img{
width:100%;
height:100%;
}
#lol{
width: 90px;
height:90px;
overflow:hidden;
border-radius:0%;
transition:2s all;
}
#lol:hover{
width:190px;
height:190px;
border-radius:50%;
border:10px solid red;
animation: hovimation 2s linear 1;
}
@keyframes hovimation{
0%{
width: 90px;
height:90px;
}
30%{
width: 140px;
height:140px;
}
100%{
width: 190px;
height:190px;
}
}
/*
@keyframes hovimation2{
0%{
width: 190px;
height:190px;
}
30%{
width: 220px;
height:220px;
}
60%{
width:140px;
height:140px;
}
100%{
width: 90px;
height:90px;
}
}
*/
</style>
<div id="lol"><img src="/image/2.png"></div>