昨今CSS3やjQueryによって簡単に動きを付けられるようになっているので、
マテリアルデザインでも提唱していますが、インタラクティブな動きつける傾向が強まっています。
傾向があるというか色々付けたがっているという感じもしますが・・・（僕もそんな一人です・・・）

ということで、今回は、
今まであまり動きをつけることのなかったフォームのinputに動きをつけてみました。

こういうサイトを見つけたので、
マネしてやってみました。
Awesome input focus effects – Usingcss3

試したデモは以下からご覧ください。
DEMO

html

css

動き自体はCSSだけでtransition付けてるくらいですね。
このtransitionはいいですね。これだけである程度アニメーション付けられますね。

cssだけで、inputにfocusした際に他の要素を動かすための方法は、
子要素にするか、隣接させるかにしないとcss指定ができないため、今回はinputの後に要素を配置しています。
その指定の仕方が上に記述してある

input.style1 ~ label

という記述方法です。
これは、input.style1の後ろに記述してある要素にcssを適用させることができます。

なので、htmlのlabelの位置を変更すると、cssが効かなくなってしまうのでご注意ください。

そしてcssだけでは、
inputの要素が入っていても動いてしまうので、
jQueryによってinputに値がある場合は、focusにした状態のままにします。

値がある場合、”isVal”というclassをつけるだけです。
isValがある時にfocusにしたままの状態にするのはcssで行います。
それも上記cssの箇所に記述してあります。

もっといろんな動きが今後出てくるかと思いますが、
僕もなにか考えていきたいと思います。

これからは何かユーザーに操作させる要素の場合、こういったインタラクティブな動きが必須になってくる気がしますのでいろいろ試してみたいと思います。