|
|||
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> Ich hoffe jemand kann mit da weiter helfen Mit freundlichen Grüßen, Flo |
Sponsored Links |
|
|||
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> 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) |
Sponsored Links |
|
|
Ä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 |