CSS3アニメーションを採用できる案件が増えてきたので、最近はjqueryを使用することが少なくなってきました。今回は入力フォームにjQueryを使わずにアニメーションを取り入れてみたいと思います。
フォームにデフォルトで付いているCSSのリセットも含めながら説明させて下さい。まずは、デモをご覧ください。

1. 入力フォームデモ

• Demo

Chromeなどのモダンブラウザでご覧ください。

2. HTML

予めアニメーションさせたい「input」「textarea」「ラジオボタン」にclassを付けていきます。

<form>
	<div>
		<p><span class="ate1">必須</span>名前：</p>
		<p><input type="text" name="name" class="input_text" placeholder="名前"></p>
	</div>
	<div>
		<p><span class="ate1">必須</span>E-mail：</p>
		<p><input type="email" name="email" class="input_text" placeholder="E-mail"></p>
	</div>
	<div>
		<p><span class="ate1">必須</span>性別：</p>
		<input type="radio" name="sex" value="male" id="malee" class="input_radio"><label for="malee">男</label><br>
		<input type="radio" name="sex" value="famale" id="famalee" class="input_radio"><label for="famalee">女</label>
	</div>
	<div>
		<p><span class="ate2">任意</span>職種：</p>
		<input type="checkbox" name="job" value="designer" id="designer" class="input_checkbox"><label for="designer">デザイナー</label><br>
		<input type="checkbox" name="job" value="coder" id="coder" class="input_checkbox"><label for="coder">コーダー</label><br>
		<input type="checkbox" name="job" value="cameraman" id="cameraman" class="input_checkbox"><label for="cameraman">カメラマン</label><br>
		<input type="checkbox" name="job" value="director" id="director" class="input_checkbox"><label for="director">ディレクター</label>
	</div>
	<div>
		<p><span class="ate2">任意</span>ご感想：</p>
		<p><textarea name="kanso" rows="4" class="input_text" placeholder="ご感想"></textarea></p>
	</div>
	<div><input type="submit" value="送信する" class="submit_btn"></div>
</form>

ハイライトしている部分にclassを付けてます。
「input」「textarea」に付いている「placeholder」はHTML5から導入された属性で、フォーム入力欄の部分に表示させておきたい文字を入れることができます。入力例などで使用する事が多いです。

では、CSSを順番に説明していきます！

3. 入力フォームのデフォルトCSSをリセット

フォームにデフォルトで付いているCSSをリセットします。

input,textarea {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: none; 
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
}
input:focus,textarea:focus { outline: none;}
input[type=radio], input[type=checkbox]{ display: none;}

ボーダーは事前に消しておきます。
「border-radius: 0px;」はiOSの場合、「input」にデフォルトで角丸が適応されているのでリセットします。

7、8行目の「appearance」プロパティは、フォーム要素のデザインをどれに変更するかというもので、例えば「select」とすればセレクトのデフォルトのCSSが適応されます。
「none」に設定すればデフォルトのCSSが消えます。ベンダープレフィックスと合わせて書いておきましょう。
※-moz-系は４月以降効かなくなってるようです。

10行目の「outline: none;」はフォームをクリックしたときに表示される青いグラデーションの枠です、これも消しておきます。擬似クラスの「:focus」を使用して適応してください。

11行目はラジオボタンとチェックボックスは、後から使う「label」タグにデザインをしたいので、要素は非表示「display: none;」にしておきます。

4. 入力フォームのCSS3アニメーション

ここではマウスでクリックすると横から色付きのボーダーがスルッと動くアニメーションを適応しています。

.input_text{
	border-bottom: 1px solid #ccc;
	box-shadow: -999px 5px 0px #ccc;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}
.input_text:focus{
	border-bottom: 1px solid #fff;
	box-shadow: 0px 5px 0px #61c5bb;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

アニメーションは「transition: all 500ms;」としました。
通常の時とfocus時、両方に入れるとお互いの変化の間をスムーズにつないでくれます。クリックを連打しても途中までアニメーションして戻るので、切れ目のないアニメーションが実装できますよ！
一番後ろの値でアニメーションスピードの調整ができますのでお好みで合わせてください。

ボーダーのアニメーションはボケのない「box-shadow」を使用して横からスライドさせて作っています。
ラッパーの「P」タグに「padding」で隙間を作って、その間に「box−shadow」を滑り込ませているイメージです。ハミ出る部分は「P」タグに「overflow:hidden」を付けることで非表示にできます。

5. ラジオボタンのCSS3アニメーション

スライドするON、OFFボタンをCSSで作ります。

.input_radio + label:before{
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	margin-right: 15px;
	border:1px solid #ccc;
	border-radius: 100px;
	box-shadow: 5px 0px 0px #ccc;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}
.input_radio:checked + label:before{
	border-radius: 100px;
	box-shadow: -5px 0px 0px #61c5bb;
	-webkit-transform: translateX(10px);
	-ms-transform: translateX(10px);
	transform: translateX(10px);
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

1、13行目のセレクタは「＋」記号の「隣接セレクタ」を使用して「label」にCSSを適応させています。
「:checked」を組み合わせると、ラジオボタンをチェックしたときに「隣接セレクタ」で指定しているlabelのCSSスタイルを変更することができます。
HTML側にもどりますが、「input」と「label」は「for」を使って連動しておきましょう。

「border−radius」で円の部分と「box-shadow」で影を付けてスライドボタンのデザインを作り、「:checked」の時、「translateX」で円を横に移動し、box−shadowの影の伸びをマイナス値で反転させつつ、色を変えています。

6. チェックボタンのCSS3アニメーション

こちらはクリックすると形が変わるタグのようなデザインで作ってます。

.input_checkbox + label {
	font-size: 0.8rem;
	margin-right: 15px;
	padding: 5px;
	border-radius: 0px;
	border:1px solid #ccc;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}
.input_checkbox:checked + label {
	color: #fff;
	border-radius: 15px;
	border:1px solid #61c5bb;
	background-color: #61c5bb;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

こちらは最初につけたボーダーを「:checked」の時に「border-radius」で角丸に変更、背景色をつけています。

CSS3アニメーションを使用した入力フォーム、いかがだったでしょうか？

jqueryは使用せずCSSだけでサクッとアニメーションできるので、CSS大好きな自分としては簡単で作りやすいです！
ユーザーの使い心地がいいフォームを目指して作っていきたいですね。

• ツイート
•