HTML5×CSS3 DOCUMENT WORKSPACE
HTML5×CSS3 DOCUMENT WORKSPACE
Reference from W3C document about HTML5.1 draft
HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s.HTML4 became a W3C Recommendation in 1997.In 2006, the W3C indicated an interest to participate in the development of HTML 5.0 and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML specification.
 HTMLワーキンググループにより策定されHTML標準化仕様になったHTML5と新しく構造化文書を表現する方法として標準化になったCSS3を使用するサイト制作が主流になっていますが、当サイトではHTML標準化仕様のW3C HTML5/CSS3 Draftより要素・構文の変更点を確認し利便性・機能性の向上についてより理解を深めていきながら、W3Cドラフト仕様を広める目的でHTML5/CSS3を使用したサイト制作法と記述法のご紹介をしています。
 当サイトにつきましては制作過程であり定期的に更新をしています。誤表記や内容等の誤りにつきましては発見次第できる限り修正を図っていく意識で制作に取り組んで参りますのでご了承下さいますようお願いします。
▶SOCIAL-INFOKNOWLEDGE.COM
CorporateSite

HTML5×CSS3 DOCUMENT WORKSPACE

CONTACT

下記フォームに必要事項を入力後、確認ボタンを押してください。

ご用件
お名前 ※必須
電話番号(半角)
Mail(半角) ※必須
性別 男 
サイトを知ったきっかけ 友人・知人  検索エンジン
お問い合わせ内容

 

CSS3 DocumentWorkspace Root > CSS3 WebFont/ColorDesign

CSS3で追加されたアニメーション・エフェクト関連仕様

アニメーション、エフェクトなどの効果はjavascriptやFlashを使用していましたがCSS3では次の仕様が追加され、それに伴いCSSの記述のみで様々なアニメーション効果、2D・3Dアニメーション効果を指定することが可能になり、スクリプトを使用せずCSSの簡易なコーディングにより動的なサイト制作が可能になりました。

詳細について確認はW3Cサイトにてご確認をお願いします。

[CSS3 2D transformの仕様]
CSS3 2D transforms
[CSS3 animations Module Level3の仕様]
CSS3 animations Module Level3
[CSS3 transforms Module Level3]
CSS3 transforms Module Level3

HTML5/CSS3のアニメーションオーサリングツールとしてはADOBE EDGEが使用されています。

[ADOBE EDGE]
Adobe Edge

CSS3で追加されたプロパティ―transorm/transition

transformプロパティ

CSS3には特殊効果の仕様が追加され、CSSの記述だけでオブジェクトのアニメーション、3D効果、スライドショーなどのエフェクト効果を簡単に実行することができるようになりました。

transformでは対象とする要素に対し、移動、回転などのエフェクト効果をつけることができます。transformプロパティの記述方法はのように記述を行います。

transformプロパティの記述
transform:scale(X方向へ拡大,Y方向へ拡大)rotate(回転する角度degで指定)translate(X軸方向へ移動、pxで指定,Y方向へ移動)skew(X軸、Y軸に歪み、degで指定);

例えばtransform:scale(2,2)rotate(360deg)translate(500px,0);ではScaleでX軸方向へ2倍拡大・Y軸方向へ2倍拡大を指定、roteteで360度回転を指定、translateでX軸方向へ500px移動を行っています。

次にtransformプロパティの値について説明します。transformプロパティには以下の値があります。

scale
X方向・Y方向へ拡大、縮小を指定します。単位はptを使用します
rotate
回転する角度を指定します。単位はdegを使用します。
translate
X軸方向・Y方向へ移動を指定します。単位はptを使用します。
skew
X軸方向・Y方向への歪みを指定します。単位はdegを使用します。
CSS記述方法

次の例では下のボールに動きをつけてみました。ボールにマウスポイントを近づけることで動きだします。

以下、HTML/CSS記述内容です。IE、Cromeでのブラウザ指定を行っている為、重複した記述があります

HTML記述
<ul id="transform"> <li class="listyle" id="ball1"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball2"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball3"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball4"><a href="#"><img src="image/ball.gif"></a></li> </ul>

CSS記述
#ball1:hover{ -webkit-transform:scale(100,100)rotate(360deg)translate(500px,0); -webkit-transition:all 1s ease-in-out; transform:scale(100,100)rotate(360deg)translate(500px,0); transition:all 1s ease-in-out; } #ball2:hover{ -webkit-transform:scale(0,0)rotate(180deg)translate(-200px,0); -webkit-transition:all 1s ease-in-out; transform:scale(0,0)rotate(180deg)translate(-200px,0); transition:all 1s ease-in-out; } #ball3:hover{ -webkit-transform:scale(1,1)rotate(0deg)translate(900px,100px); -webkit-transition:all 0.7s ease-in-out; transform:scale(1,1)rotate(0deg)translate(900px,100px); transition:all 0.7s ease-in-out; } #ball4:hover{ -webkit-transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg); -webkit-transition:all 0.7s ease-in-out; transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg); transition:all 0.7s ease-in-out; }

transitionプロパティ

transitionプロパティでは変化の仕方を設定します。次のように記述します。

transtionプロパティの記述
transition:変化させるプロパティ名の指定、限定しない場合はall 変化かかる時間;

値には次の値があります。

transition-property
transition-propertyによって変化させる対象のプロパティを指定することができます。限定して変化をさせるにはプロパティ名でそのプロパティを指定しコンマ区切りで複数指定することも可能です。限定させない場合にはallを使用します。
transition-duration
transition-durationでは変化が行う時間を指定、アニメーションにかける時間を指定します。単位はs(秒)かms(ミリ秒)で行います
transition-delay
transition-delayでは変化が始まる時間を指定を指定します。単位はs(秒)かms(ミリ秒)で行います
transition-timing-function
transition-timing-functionではアニメーションの変化の速度の仕方を設定します。

次の例ではタブにtrasisionプロパティを使用して変化速度を設定しています。以下、例文を記述します。

お気に入り
テスト
テストメニュー
テストメニュー

以下、HTML/CSS記述内容です。

HTML記述
<dl id="dlstyle">y <dd id="dditem1" ><a href="#お気に入り">お気に入り</a></dd> <dd id="dditem2" ><a href="#">テスト</a></dd> <dd id="dditem3" ><a href="#">テストメニュー</a></dd> <dd id="dditem4" ><a href="#">テストメニュー</a></dd> </dl>
CSS記述
#dditem1{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem1:hover{ -webkit-transform:scale(1,1.2)translate(0,-2px); transform:scale(1,1.2)translate(0,-2px); background-color: #9900cc; transition:all 0.7s; } #dditem2{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem2:hover{ -webkit-transform:scale(1.2,1); transform:scale(1.2,1); background-color: #33cc99; transition:all 1s; } #dditem3{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem3:hover{ -webkit-transform:scale(1,1.3)translate(0,-3px); transform:scale(1,1.3)translate(0,-3px); background-color: #ffffff; } #dditem4{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem4:hover{ -webkit-transform:scale(1,1.3)translate(0,-3px); transform:scale(1,1.3)translate(0,-3px); background-color: #ff9933; transition:all 1s; }