XHTMLforum - CSS3 Animation erst beim runter hovern starten

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS3 Animation erst beim runter hovern starten (http://xhtmlforum.de/showthread.php?t=71844)

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

Ohh je das ist jetzt peinlich, hab anscheinend bisschen vorschnell gepostet ... :/

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.1s;

                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:unter_gehen;

                animation-duration: 0.1s;

                animation-direction:normal;

                animation-timing-function:linear;

                animation-play-state:running;

                animation-iteration-count:1;

                animation-delay: 0s;

                animation-fill-mode:forwards;

            }

            @keyframes auf_gehen{

                from {

                     stroke-width: 4;

                }

                to {

                    stroke-width: 10;

                }

            }

            @keyframes unter_gehen{

                from {

                     stroke-width: 10;

                }

                to {

                    stroke-width: 4;

                }

            }

        </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>

Also wenn ich ne neu Animation erstelle dann klappt es einwandfrei ... kann mir trotzdem jemand zeigen wie man das mit nur einer machen kann ?

Ist es auch möglich die Größe und Position mit einer CSS Animation zu beinflussen ?