前回CSS3でボタンを作ってみました。今回はそれをアニメーションによる効果をつけてみようと思います。CSS3にはアニメーション効果のプロパティに『transition』と『animation』があります。
『transition』と『animation』
以前CSS3プロパティでも書きましたが、CSS3のアニメーションプロパティには『transitional』と『animation』があります。
『animation』はキーフレームを使って指定ができますので、回転、移動、ループ、要素の変化のアニメーションができるのが特徴です。
が、現在2011年4月末日の段階でIE(IE9は未確認)とFireFox、Operaにはこの『animation』は未対応らしいです(未確認)。
確か記憶ではFireFoxは3.6のときに将来的にはサポートすると言うようなことを聞いたのですが。。。
webkit対応のSafari、Chromeは対応していますからスマートフォンには対応できます。（XPERIA、iPhone4で確認）
なので今回は『transitional』を使ってアニメーションさせていきます。
『transitional』はFireFox、Opera、Safari、Chromeではサポートしているのでブラウズさせるのには問題がないと思います。
とりあえず『IE』はおいておきます。とりあえずです。
しかし、『gradient』を使うとFireFoxとOperaはグラデーションのアニメーションをしてくれません。
CSSの指定
まず最初にCSS3でグラデーションを使ったボタンを作ります。前回作ったボタンの簡易版です。
a.css3btn {
margin-bottom: 12px;
margin-top: 12px;
padding: 7px;
width:150px;
display: block;
color: #FFF;
font-weight:bold;
text-decoration: none;
text-align: center;
border:1px solid #00ADEF;
background:#00ADEF;
background-image: -webkit-gradient(linear, left top, left bottom,from(#00ADEF), color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0)),to(#00ADEF));
background-image: -moz-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
background-image: -o-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
background-image: linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(0, 171, 239) 50%);
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 5px 5px 3px rgba(5, 100, 136, 0.8);
}
前回でOperaの指定方法を書き忘れていたので、ここで改めてご紹介します。（すみません）
background-image: -o-linear-gradient(top,任意);/*グラデーションの指定*/
Operaの指定方法はmozと同じで、拡張子を『moz』から『o』に変更するだけです。
次にマウスオーバー時の指定です。
a:hover.css3btn{
background-color:#039ed9;
background-image: -webkit-gradient(linear, left top, left bottom,from(#00ADEF), color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0)),to(#00ADEF));
background-image: -moz-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
background-image: -o-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
background-image: linear-gradient(top,rgb(255, 255, 255) 0%,rgb(163, 225, 249) 3%,rgb(83, 199, 244) 45%,rgb(3, 158, 217) 50%);
}
ここまでは前回のおさらいに近いです。
transitionalの指定
それではつぎにアニメーションの指定をします。
指定は元の要素に追加指定します。今回は『a.css3btn』です。
transition: 変化させる時間s イージング; -webkit-transition: 変化させる時間s イージング; -moz-transition:変化させる時間s イージング; -o-transition:変化させる時間s イージング;
以上です。
簡単ですよねw
そうなんです。たったこれだけなんです。
これで通常時とマウスオーバー時をアニメーションしてくれます。
といいましても、CSS3がまだまだ完全にサポートされていないので、ブラウザによってはアニメーションできないプロパティもあります。
今回は『gradient』がそれにあたります。
ということは、『gradient』を指定しなければ色の変化もきちんとアニメーションします。
『gradient』がアニメーションするのは現在確認できたのが、『webkit』をサポートしているSafari、Chromeです。こちらで『gradient』もアニメーションしてくれました。
指定の仕方の例です
transition: 1.5s ease-in-out; -webkit-transition: 1.5s ease-in-out; -moz-transition:1.5s ease-in-out; -o-transition:1.5s ease-in-out;
数字は『秒数』です。今回のしていだと『1.5秒』で変化させています。
イージングの指定は以下のようになります。
| ease | 開始と終了を滑らかに（初期値） |
| linear | 一定 |
| ease-in | ゆっくり開始 |
| ease-out | ゆっくり終了 |
| ease-in-out | ゆっくり開始、ゆっくり終了 |
『gradient』がないときの指定は以下のとおりです。
a.css3btn2 {
margin-bottom: 12px;
margin-top: 12px;
padding: 7px;
width:150px;
display: block;
color: #FFF;
font-weight:bold;
text-decoration: none;
text-align: center;
border:1px solid #00ADEF;
background:#00ADEF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 5px 5px 3px rgba(5, 100, 136, 0.8);
transition: 1.5s ease-in-out;
-webkit-transition: 1.5s ease-in-out;
-moz-transition:1.5s ease-in-out;
-o-transition:1.5s ease-in-out;
}
a:hover.css3btn2{
background:red;
}
この指定ですと色の変化にアニメーションをつける事ができます。
色の変化だけだといまいちわかりにくい（赤くしたのは分かりやすくする為です）のでボタンの大きさも変えるといっそう分かりやすくなります。
動作環境は、Firefox4、Safari5とGoogleChrome11、Opera11です。スマートフォンはiPhone4、Android2.1で確認しています。
ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、予めご了承ください。
上記をご承知の方のみ、以下よりダウンロードしてください。
なにか間違いがありましたらご連絡頂けますと幸いです。
