-
css3 keyframes safari
liebe community!
ich versuche gerade, ein paar individuellen elementen ein wenig "schwung" einzuhauchen und dachte, ich mache das mit css3 animationen.
bei chrome, firefox und opera funktionieren meine angaben auch (unterschiedliche präfixe) !!bestens!! - nur mit safari hab ich meine lieben probleme: es will sich nix bewegen.
habe schon einiges nachgelesen, etwa dass zumindest safari v4 und safari v5 ganz gut laufen auch ohne präfix, nur bei v6 muss man "-webkit" als präfix davorhängen und auch, dass man von 0 - 100% gehen muss und bei safari nicht bei z.b. 80% aufhören kann aber auch mit präfix geht es nicht. kann mir jemand einen hinweis geben was ich übersehen habe? mein technisches englisch ist leider nicht herausragend also habe ich beim nachforschen im web wahrscheinlich schon hinweise übersehen..
meine angaben
@-webkit-keyframes running {
0% { transform: translateX(80px)}
50% { transform: translateX(330px)}
100% { transform: translateX(580px)}
}
.klasseobjekt {
-webkit-animation: running;
-webkit-animation-duration: 2s;
-webkit-animation-direction: right;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
}
-
Vielleicht hilft dir das:
- http://www.smashingmagazine.com/sear...%3A10&ie=UTF-8
Ist zwar auch auf englisch aber die Beispiele sind sehr anschaulich.
Gesendet von meinem Nexus 7 mit Tapatalk
-
vielen dank für den hinweis. die dortigen vorschläge sind aber teilweise schon sehr veraltet und bei safari 4 und safari 5 funktionieren die vorgeschlagenen tipps eh nur bei safari 6+ gibt es probleme.
mittlerweile bin ich aber durch experimentieren drauf gekommen, dass das präfix auch zum transform-befehl dazugehört
also für safari { -webkit-transform: translateX } bzw. dann für firefox { -moz-transform: translateX }
bei vielen beispielen im netz wurde das entweder vergessen zu erwähnen oder als selbstverständlich erachtet und nur die grundform zur verfügung gestellt, bei manchen seiten steht aber sogar, dass safari ohne präfix funktioniert - das stimmt schlichtweg nicht.
-
Schau mal hier www.caniuse.com/#search=translate.
Demnach braucht Safari auf jeden Fall noch ein Prefix.
Die Internetseite ist für mich immer die Quelle für so etwas. Die wird sehr gut gepflegt.
-
darauf bin ich schon gestoßen aber ich habe nicht bedacht, präfixe schon bei der vorhergehenden definition zu verwenden und bin davon ausgegangen, dass es ausreicht, dies beim betreffenden objekt zu erledigen.
danke jedenfalls für die antwort und den link - auch für andere, die ähnliche fragen haben