zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS3 Animation erst beim runter hovern starten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.03.2015, 16:15
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
  #2 (permalink)  
Alt 22.03.2015, 16:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2012
Beiträge: 65
Feirell befindet sich auf einem aufstrebenden Ast
Standard

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 ?

Geändert von Feirell (22.03.2015 um 16:30 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS3 Animation background-size ruckelt in webkit browsern Barodscheff CSS 0 05.01.2013 13:51
CSS3 Animation mit -webkit-animation Seerius CSS 2 20.08.2012 13:52
CSS3 Adventskalender Webstandard Ressourcen 0 05.12.2011 09:57
CSS3: box-shadow wird beim hovern abgeschnitten kadees CSS 2 20.10.2010 20:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:48 Uhr.