• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage input und textarea / transform und transition

A

annsen

Mitglied
Ich möchte gern per CSS die genannten Felder animieren und komme damit nicht klar.

Per "transform: translate" möchte ich die "placeholder"-Einträge bei Klick in die Felder (focus) bewegen - das funktioniert auch durch die Broswer-Präfixe - sowohl in Firefox als auch in Chrome.

Code: 
input:focus::-webkit-input-placeholder {font-size: 0.8rem; -webkit-transform: translateY(-15px); transform: translateY(-15px); visibility: visible !important;}
input:focus:-moz-placeholder {font-size: 0.8rem; -moz-transform: translateY(-15px); visibility: visible !important;}
input:focus::-moz-placeholder {font-size: 0.8rem; -moz-transform: translateY(-15px); visibility: visible !important;}
input:focus:-ms-input-placeholder {font-size: 0.8rem; -ms-transform: translateY(-15px); visibility: visible !important;}

Zusätzlich möchte ich jetzt die Bewegung mit "transition" animieren.

Auf http://caniuse.com/#search=transition stehen für die aktuellen Broswergenerationen sowohl "transform" als auch "transition" als OHNE Präfix nutzbar. Allerdings funktioniert "transform" (siehe oben) bei mir nur mit Präfix. "transition" (Code siehe nachfolgend) funktioniert mit und ohne Präfix im Chrome - im Firefox funktioniert es gar nicht.

Code: 
input::-webkit-input-placeholder {transition: all 0.5s ease-in-out;}
input:-moz-placeholder {transition: all 0.5s ease-in-out;}
input::-moz-placeholder {transition: all 0.5s ease-in-out;}
input:-ms-input-placeholder {transition: all 0.5s ease-in-out;}

Der "senden"-Button (Code siehe unten) wird in beiden Browsern ebenfalls korrekt mit "transition" animiert, was für mich belegt, dass es ohne Pfäfix funktioniert (auch im Firefox).

Code: 
#send {transition: all 0.5s ease-in-out;}

Warum funktioniert "transition" (für input/textarea + placeholder) nicht im Firefox und nur für den "senden"-Button - seht ihr einen Fehler - könnt ihr mir helfen?

Danke für eure Hinweise!!
 
Werbung:
annsen schrieb:
Zusätzlich möchte ich jetzt die Bewegung mit "transition" animieren.

Auf http://caniuse.com/#search=transition stehen für die aktuellen Broswergenerationen sowohl "transform" als auch "transition" als OHNE Präfix nutzbar. [...] "transition" [...] funktioniert mit und ohne Präfix im Chrome - im Firefox funktioniert es gar nicht.
[...]
Der "senden"-Button [...] wird in beiden Browsern ebenfalls korrekt mit "transition" animiert, was für mich belegt, dass es ohne Pfäfix funktioniert (auch im Firefox).
[...]
Warum funktioniert "transition" (für input/textarea + placeholder) nicht im Firefox und nur für den "senden"-Button - seht ihr einen Fehler - könnt ihr mir helfen?
Zum Vergrößern anklicken....
Hat es Dich bei Deiner Recherche bzgl. http://caniuse.com/#search=transition nicht interessiert, welche 6 konkreten Probleme mit CSS3 Transitions bekannt, und unterhalb der Browserübersicht im gleichnamigen Reiter "Known issues (6)" aufgelistet sind? o_O:(

Ein Blick darin hätte Dich darüber aufgeklärt, dass neben anderen diversen Browserversionen auch Firefox die Transition bei keinem Pseudoelement unterstützt:
http://caniuse.com/#feat=css-transitions schrieb:
Not supported on any pseudo-elements besides ::before and ::after for Firefox, Chrome 26+, Opera 16+ and IE10+.
Zum Vergrößern anklicken....
Dass ::placeholder eines der diversen CSS3-Pseudoelemente darstellt, kannst Du daraus sicherlich schlussfolgern.

Falls nicht, deutliches Erkennungsmerkmal: Zwei vorangestellte Doppelpunkte, die sie von den althergebrachten CSS2-Pseudoelementen und -klassen (mit einem vorangestellten Doppelpunkt) unterscheiden sollen.

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
 
Spicelab schrieb:
Ein Blick darin hätte Dich darüber aufgeklärt, dass neben anderen diversen Browserversionen auch Firefox die Transition bei keinem Pseudoelement unterstützt:

Dass ::placeholder eines der diversen CSS3-Pseudoelemente darstellt, kannst Du daraus sicherlich schlussfolgern.
Zum Vergrößern anklicken....

Ahhhh... deswegen funktionierts auch beim "senden"-Button. Das Problem ist also das Zusammenspiel mit dem Pseudoelement "placeholder", nicht "transition" an sich.

Mit Pseudoelementen habe ich mich tatsächlich noch gar nicht auseinander gesetzt - DANKE!! für die Info - jetzt habe ich was um mein Wochenende sinnvoll am Schreibtisch zu verbringen... :D
 
Werbung:
annsen schrieb:
Ahhhh... deswegen funktionierts auch beim "senden"-Button. Das Problem ist also das Zusammenspiel mit dem Pseudoelement "placeholder", nicht "transition" an sich.
Zum Vergrößern anklicken....
Bingo :cool::D
annsen schrieb:
Mit Pseudoelementen habe ich mich tatsächlich noch gar nicht auseinander gesetzt - DANKE!! für die Info - jetzt habe ich was um mein Wochenende sinnvoll am Schreibtisch zu verbringen... :D
Zum Vergrößern anklicken....
Da hat jemand aber nochmal Glück gehabt :D

Und viel Erfolg beim sinnvollen Studium :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben