随分と間が開いてしまいました、すいません。
では早速やっていきましょう。
今回はまずJavascriptを使わないCSSだけのアニメーションの方法からやっていきたいと思います。
実はこれは最近になって出来るようになった機能です。
とりあえず以下のようなコードを書いてみてください
<!DOCTYPE html>
<html>
<head>
<title>テストtransition</title>
<style> <!--
#sample1{
display:block;
position:relative;
width:300px;
height:32px;
text-align:center;
color:#ffffff;
background-color:#fda352;
transition:background-color 1s linear 0s;
}
#sample:hover{
background-color:#ffffff;
}-->
</style>
</head>
<body>
<div id="sample1">カーソルを合わせてみてください</div>
</body>
<html>
まあよく見るHTMLコードですね。
しかし、HTML5はいいですね。
少し前のは煩わしい物がたくさんあってコードも見にくかったものです。
それはさておき、スタイル要素の中身を見てください。
ほとんど今までのCSSでもよくお世話になったものが並んでいるかと思います。
:hover擬似要素でマウスカーソルが上に来た時に色がなくなるということは見ればわかるかと思います。
しかし、実際に試してみるとあら不思議ゆっくり時間をかけて変わっていくではありませんか
これは一体どういうことでしょう、実はこれは#sample1のスタイルシートの最後の行をてください、transitionとあるでしょう。
これがこのアニメーションを作り出している正体です。
このスタイルの中身を詳しく見て行きましょう。
transitionのパラメータは4つの要素からなっています。
それらはすべて半角の空白で区切られていて、1番最初は値が変化した時に適応するスタイルの指定をしています。
今回の場合は背景の色がかわった時にアニメーションが適応されるようになっています。
実はこれ、要素指定できるものが限られていて基本数値で書かれているものだけみたいです。
なので top color opacityなど数値指定されるものはできますが displayとか文字列で指定しているものはだめみたいです。
なお、指定できるものすべてを指定する場合は｢all｣と書きます。
次のパラメーターは変化する時間を指定するものです。
単位はs(セカンド、秒ですね)でこれを付けないとブラウザによっては誤動作を起こすみたいです。
0.1秒単位で指定できるみたいです。
その次は変化の方法を指定するものです。
ずっと一邸の割合で変えていくのがlinearです。
他には ease ease-in ease-out ease-in-out cubic-bezier(数値, 数値, 数値, 数値)です。
最後以外は決まった動きをします、どんな動きは自分で確かめてみるといいですよ。
最後のものは3次ベジェ曲線というものでアニメーションの変化を指定するようです。
詳しいところは以下のリンクへ
http://www.htmq.com/css3/transition-timing-function.shtml
最後は実行を延滞させる時間です。
これに1sと入れるとアニメーションが1秒だけずれます。
これも0.1秒単位で指定できます。
また、このtransitionは複数指定できるみたいです。
複数指定する場合は
transition:width 2s ease 0s,opacity 2s linear 0s;
のようにコンマで区切って別の指定をしてください。
またこの要素を:hoverの中などに再度別のパラメーターを指定したり、延滞時間をずらしてあたかも連続したアニメーションのように振る舞うことも可能です。
ただ、CSSだけでは決まった指定しかできないのでここにJavascriptを入れると更に面白い動きができます。
次回はこれをやっていきましょう、とりあえず今回はここまで。
ほな、さいなら。
0 件のコメント:
コメントを投稿