HTML5+CSS3―アニメーション

HTML5 授業



CSS3アニメーション


  • CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツール



【CSS】コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ




CSS3 Tutorial




CSS3アニメーションの基礎(Animation編)




CSS3リファレンス：アニメーション




MOZILLA DEVELOPER NETWORK：CSS アニメーション




ねこだまのCSSリファレンス&デモ




マーキー

  • 左右や上下にスクロールする文字や画像を表示します


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>基本のマーキー</title>
<link rel="stylesheet" href="" media="only screen and(max-width:480px)">

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<style>
#mq {
overflow:-webkit-marquee;
}
</style>

</head>
<body>
<p id="mg">4月20日まで期間限定セール実施中！</p>
</body>
</html>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】







ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>幅から文字がはみ出すマーキー</title>
<link rel="stylesheet" href="" media="only screen and(max-width:480px)">

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<style>
#mq {
overflow: -webkit-marquee;
white-space:nowrap;
width:100%;
}
</style>

</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p>
</body>
</html>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】







ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>角度を変更した要素のマーキー</title>
<link rel="stylesheet" href="" media="only screen and(max-width:480px)">

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<style>
#mq {
overflow:
 -webkit-marquee;
 -webkit-transform:rotate(45deg);
width:50%;
white-spac: nowrap;
position: absolute;
top: 0.5em;
right: -2.5em;
}
</style>

</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>
</body>
</html>

ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】