#placeholer

Je suis tombé sur une question sur Stackoverflow qui voulait animer le placeholder pour lui donner un effet d'apparition en animation avec pour piste d'agrandir la largeur.

Première idée que j'ai eu était d'appliquer un élément qui aura le rôle de calque par dessus le input avec :before et de l'animer. Le soucis c'est qu'on ne peut pas appliquer de pseudo-élément à la balise input. Sachant qu'on peut appliquer du style au placeholer j'ai essayé d'appliquer le pseudo-élément au placeholder lui-même et qui sera dans notre cas plus cohérent...et ça fonctionne ! Je trouve ça marrant et étrange à la fois qu'on puisse appliquer des pseudo-éléments au placeholder mais pas au input. Du coup ça devient jouable :

@include keyframes(apparition) { 0% { width: 100%; } 100% { width: 0; } } input { height: 40px; width: 200px; @include input-placeholder { position: relative; &:before { background-color: #fff; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 100%; @include animation(apparition 5s infinite linear); } } }

Résultat : http://codepen.io/pik_at/pen/wBmmoY