Moin moin alle mit einander,
ich bräuchte da mal wieder eure Hilfe. Und zwar experimentiere ich im Moment mit den CSS 3 Animationen herum. Der Versuch ist beim hovern eine Animation auszulösen und dann beim runter hovern die entgegen gesetzte Animation auszuführen.
Der Momentane Versuch:
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<meta charset="UTF-8">
<link href="./resurces/Feirell_ico.svg" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<style>
#green_yellow_circel:hover{
animation-name:auf_gehen;
animation-duration: 0.25s;
animation-direction:normal;
animation-timing-function:linear;
animation-play-state:running;
animation-iteration-count:1;
animation-delay: 0s;
animation-fill-mode:forwards;
}
#green_yellow_circel{
animation-name:auf_gehen;
animation-duration: 0.25s;
animation-direction:reverse;
animation-timing-function:linear;
animation-play-state:running;
animation-iteration-count:1;
animation-delay: 0s;
animation-fill-mode:backwards;
}
@keyframes auf_gehen{
from {
stroke-width: 4;
}
to {
stroke-width: 10;
}
}
</style>
<svg width="100" height="100">
<circle id="green_yellow_circel" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Wenn ich die untere css Anweisung lösche funktioniert die durch das hovern ausgelöste Animation klasse, nur leider wird sie dann halt nicht wieder ausgelöst sobald man nicht mehr hover.
Ich hoffe jemand kann mit da weiter helfen
Mit freundlichen Grüßen,
Flo