Das Problem

Möchte man Input-Elemente mit fade-Transition versehen, kommt man an einen schwierigen Punkt. Aus barrierefreiheits- und antiphishing-Gründen sollte man keine aktiven Formularelemente unsichtbar machen (beispielsweise mit opacity: 0;). Es besteht die Gefahr, das der Betrachter ohne Wissen im Formular „herumstochert“ und ungewollte Aktionen auslöst.

Eine Lösung scheint zunächst display: none; oder visibility: hidden;, doch die display-Proberty lässt sich nicht animieren. Benutzt man visibility ist das Element in der Regel ausgeblendet, bevor die opacity-Transition greifen kann.

Die Lösung

Die Lösung besteht nun darin, die opacity-Transition direkt auszuführen, die visible-Transition aber mit einer Verzögerung (transition-delay) zu versehen. Und zwar getrennt für „sichtbar“ und „verborgen“.
Für die fade-in-Transition ist keine Verzögerung der visible-Proberty gewünscht – das Element soll direkt „einblenden“. Dies ist in der „normalen“ Formatierung des Elementes anzugeben. Beim Ausblenden des Elementes Hingegen soll die visible-Transition verzögert werden. In der Class .hide, oder wie sie bei euch heißt, wird die Verzögerung angegeben. Diese Class ist dann per JavaScript dem Input-Element hinzuzufügen.

Ein Beispiel

Die fade-Transition der Suche dieser Seite rechts in der Navigationsleite ist mit dem folgenden Code animiert:

.search-box {
  opacity: 1.00;
  transition: 
    .3s opacity .1s ease-in-out,
     .0s visibility .0s;
  visibility: visible;
}

.search-box.hide  {
   opacity: .00;
   transition: 
    .3s opacity .1s ease-in-out, 
    .0s visibility .3s;
  visibility: hidden;
}

Ist die Suchleiste ausgeblendet, erhält sie zusätzlich die Class .hide per JavaScript. Soll die Suchleiste ausgeblendet werden, ist die visible-Proberty verzögert (denn zu diesem Zeitpunkt besitzt das Element bereits die Class .hide). Sobalt die Suchleiste eingeblendet werden soll, wird die Versögerung auf null gesetzt, damit das Element sofort sichtbar wird (reguläre Formatierung).

Ich bin mir nicht sicher, ob dieser Code bei allen Browsern zum selben Erfolg führt, aber mit Firefox und QupZilla (webkit) funktionierte dies ordnungsgemä

Fazit

Auf diese Weise ist gegeben, dass die mit fade-Transitionen ausgeblendeten Elemente nicht mit der Tastatur erreichbar sind und der Betrachter keine ungewollten Aktionen auslösen kann.

Danken möchte ich Florens Verschelde für seinen Beitrag „Fade-in / fade-out effects with CSS“, der mich der Lösung deutlich näher brachte.