Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.03.2015, 17:15
Feirell Feirell ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2012
Beiträge: 65
Feirell befindet sich auf einem aufstrebenden Ast
Standard CSS3 Animation erst beim runter hovern starten

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
Mit Zitat antworten
Sponsored Links