Animation - アニメーション
- @keyframes
〔キーフレーム定義〕
- animation
〔アニメーションプロパティの一括指定〕
- animation-name
〔アニメーション名〕
- animation-duration
〔アニメーション完了までの時間〕
- animation-timing-function
〔アニメーションの進行割合〕
- animation-delay
〔アニメーション開始の遅延時間〕
- animation-iteration-count
〔アニメーションの繰り返し回数〕
- animation-direction
〔アニメーションする方向〕
- animation-fill-mode
〔アニメーションのモードを指定〕
- animation-play-state
〔アニメーションの実行・一時停止〕
@keyframes 
キーフレーム定義
2011/12/1
@-moz-keyframes
@-ms-keyframes
@-o-keyframes
@keyframesは、アニメーションフレームを定義します。
アニメーションの開始と終了のフレームのみを定義する場合は、
「from」(または0%)、「to」(または100%)で指定します。
#sample { animation:myani 3s linear 1s infinite alternate; /* CSS3 */ -moz-animation:myani 3s linear 1s infinite alternate; /* Firefox */ -webkit-animation:myani 3s linear 1s infinite alternate; /* Chrome, Safari */ -ms-animation:myani 3s linear 1s infinite alternate; /* IE */ -o-animation:myani 3s linear 1s infinite alternate; /* Opera */ } @keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} }
フレームを細かく定義したい場合は、
0%、25%、50%、75%、100% のように「%」で指定します。
#sample { animation:myani 3s linear 1s infinite alternate; /* CSS3 */ -moz-animation:myani 3s linear 1s infinite alternate; /* Firefox */ -webkit-animation:myani 3s linear 1s infinite alternate; /* Chrome, Safari */ -ms-animation:myani 3s linear 1s infinite alternate; /* IE */ -o-animation:myani 3s linear 1s infinite alternate; /* Opera */ } @keyframes myani { 0% {left:0px;} 50% {left:200px;} 100% {left:400px;} } @-moz-keyframes myani { 0% {left:0px;} 50% {left:200px;} 100% {left:400px;} } @-webkit-keyframes myani { 0% {left:0px;} 50% {left:200px;} 100% {left:400px;} } @-ms-keyframes myani { 0% {left:0px;} 50% {left:200px;} 100% {left:400px;} } @-o-keyframes myani { 0% {left:0px;} 50% {left:200px;} 100% {left:400px;} }
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>@keyframes</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-name",val); $obj.css("animation-name",val); }); }); </script> <style type="text/css"> #sample { width:500px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; animation:myani 3s linear 1s infinite alternate; /* CSS3 */ -moz-animation:myani 3s linear 1s infinite alternate; /* Firefox */ -webkit-animation:myani 3s linear 1s infinite alternate; /* Chrome, Safari */ -ms-animation:myani 3s linear 1s infinite alternate; /* IE */ -o-animation:myani 3s linear 1s infinite alternate; /* Opera */ } @keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} } @keyframes myani2 { 0% {left:0px;} 25% { left:300px; } 50% { left:200px; top:200px; } 75% { left:400px; top:100px; } 100% {left:0px;} } @-moz-keyframes myani2 { 0% {left:0px;} 25% { left:300px; } 50% { left:200px; top:200px; } 75% { left:400px; top:100px; } 100% {left:0px;} } @-webkit-keyframes myani2 { 0% {left:0px;} 25% { left:300px; } 50% { left:200px; top:200px; } 75% { left:400px; top:100px; } 100% {left:0px;} } @-ms-keyframes myani2 { 0% {left:0px;} 25% { left:300px; } 50% { left:200px; top:200px; } 75% { left:400px; top:100px; } 100% {left:0px;} } @-o-keyframes myani2 { 0% {left:0px;} 25% { left:300px; } 50% { left:200px; top:200px; } 75% { left:400px; top:100px; } 100% {left:0px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>@keyframes</h2> <p>アニメーションのキーフレームを定義します。</p> <!-- CODE --> <p id="rgrp"> @keyframes: <label for="r1"><input type="radio" name="r" id="r1" value="myani" checked="checked">myani</label> <label for="r2"><input type="radio" name="r" id="r2" value="myani2">myani2</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation 
アニメーションプロパティの一括指定
2011/12/1
-moz-animation
-ms-animation
-o-animation
animationプロパティは、アニメーションプロパティを一括指定できるショートハンドです。
- デフォルト値:none 0 ease 0 1 normal ※各プロパティの値を参照。
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <style type="text/css"> #sample { width:300px; height:300px; background:#eee; position:relative; } #sample p { margin:0; padding:0; width:10px; height:10px; position:absolute; top:140px; left:140px; line-height:10px; text-align:center; font-weight:bold; font-size:10px; color:#ff6699; animation:myani 3s 1; /* Firefox */ -moz-animation:myani 1s ease-in 2s infinite alternate; /* Chrome, Safari */ -webkit-animation:myani 2s ease-in 2s infinite alternate; } @keyframes myani { 100% {left:50px; top:50px; width:300px; height:200px; line-height:200px; font-size:100px; } } @-moz-keyframes myani { 100% {left:50px; top:50px; width:200px; height:200px; line-height:200px; font-size:100px; } } @-webkit-keyframes myani { 100% {left:0; top:0; width:300px; height:300px; line-height:300px; font-size:300px; } } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation</h2> <p>アニメーションプロパティを一括指定します。</p> <!-- CODE --> <div id="sample"> <p>♥</p> </div> <!-- CODE / --> </div> </body> </html>
animation-name 
アニメーション名
2011/12/1
-moz-animation-name
-ms-animation-name
-o-animation-name
animation-nameプロパティは、アニメーションの名前(@keyframesの名前)を指定します。
- デフォルト値:none
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
none | なし |
name | @keyframesの名前。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-name</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-name",val); $obj.css("animation-name",val); }); }); </script> <style type="text/css"> #sample { width:300px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 3s ease 1s 2 alternate; /* CSS3 */ -webkit-animation:myani 3s ease 1s 2 alternate; /* Chrome, Safari */ -moz-animation:myani 3s ease 1s 2 alternate; /* Firefox */ -ms-animation:myani 3s ease 1s 2 alternate; /* IE */ -o-animation:myani 3s ease 1s 2 alternate; /* Opera */ } /* myani */ @keyframes myani { from {left:0px;} to {left:200px;} } @-webkit-keyframes myani { from {left:0px;} to {left:200px;} } @-moz-keyframes myani { from {left:0px;} to {left:200px;} } @-ms-keyframes myani { from {left:0px;} to {left:200px;} } @-o-keyframes myani { from {left:0px;} to {left:200px;} } /* myani2 */ @keyframes myani2 { from {left:0px;} to {top:200px;} } @-webkit-keyframes myani2 { from {left:0px;} to {top:200px;} } @-moz-keyframes myani2 { from {left:0px;} to {top:200px;} } @-ms-keyframes myani2 { from {left:0px;} to {top:200px;} } @-o-keyframes myani2 { from {left:0px;} to {top:200px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-name</h2> <p>アニメーションの名前を指定します。</p> <!-- CODE --> <p id="rgrp"> animation-name: <label for="r1"><input type="radio" name="r" id="r1" value="myani" checked="checked">myani</label> <label for="r2"><input type="radio" name="r" id="r2" value="myani2">myani2</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-duration 
アニメーション完了までの時間
2011/12/1
-moz-animation-duration
-ms-animation-duration
-o-animation-duration
animation-durationプロパティは、アニメーションサイクル(1周期分)が完了するのにかかる時間を指定します。 0を指定した場合は、即時となるため、アニメーションなしとなります。
- デフォルト値:0
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
time | 秒(単位:s)、ミリ秒(単位:ms)で指定。 単位を省略した場合は秒が適用。 負の値は0扱い。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-duration</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-duration",val); $obj.css("animation-duration",val); }); }); </script> <style type="text/css"> #sample { width:300px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 3s ease 1s 2 alternate ; /* CSS3 */ -webkit-animation:myani 3s ease 1s 2 alternate ; /* Chrome, Safari */ -moz-animation:myani 3s ease 1s 2 alternate ; /* Firefox */ -ms-animation:myani 3s ease 1s 2 alternate ; /* IE */ -o-animation:myani 3s ease 1s 2 alternate ; /* Opera */ } @keyframes myani { from {left:0px;} to {left:200px;} } @-webkit-keyframes myani { from {left:0px;} to {left:200px;} } @-moz-keyframes myani { from {left:0px;} to {left:200px;} } @-ms-keyframes myani { from {left:0px;} to {left:200px;} } @-o-keyframes myani { from {left:0px;} to {left:200px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-duration</h2> <p>アニメーションサイクルが完了するのにかかる時間を指定します。</p> <!-- CODE --> <p id="rgrp"> animation-duration: <label for="r9"><input type="radio" name="r" id="r9" value="0">0</label> <label for="r7"><input type="radio" name="r" id="r7" value="100ms">100ms</label> <label for="r8"><input type="radio" name="r" id="r8" value="500ms">500ms</label> <label for="r1"><input type="radio" name="r" id="r1" value="1s" checked="checked">1s</label> <label for="r2"><input type="radio" name="r" id="r2" value="2s">2s</label> <label for="r3"><input type="radio" name="r" id="r3" value="3s">3s</label> <label for="r4"><input type="radio" name="r" id="r4" value="4s">4s</label> <label for="r5"><input type="radio" name="r" id="r5" value="5s">5s</label> <label for="r6"><input type="radio" name="r" id="r6" value="10s">10s</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-timing-function 
アニメーションの進行割合
2011/12/1
-moz-animation-timing-funciton
-ms-animation-timing-funciton
-o-animation-timing-funciton
animation-timing-funcitonプロパティは、アニメーションをどのように実行するか進捗方法を加速曲線で指定します。 transition-timing-functionと同じ値を取ります。 このプロパティは、アニメーション全体ではなく、キーフレーム毎に適用されます。
- デフォルト値:ease
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
ease | cubic-bezier(0.0, 0.0, 1.0, 1.0)を表す。 |
linear | cubic-bezier(0.25, 0.1, 0.25, 1.0)を表す。 |
ease-in | cubic-bezier(0.42, 0.0, 1.0, 1.0)を表す。 |
ease-out | cubic-bezier(0.0, 0.0, 0.58, 1.0)を表す。 |
ease-in-out | cubic-bezier(0.42, 0.0, 0.58, 1.0)を表す。 |
cubic-bezier | 3次ベジェ曲線。 cubic-bezier(<number>, <number>, <number>, <number>) |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-timing-function</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-timing-function",val); $obj.css("animation-timing-function",val); }); }); </script> <style type="text/css"> #sample { width:500px; height:300px; background:#eee; } #samples div, #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; animation:myani 3s ease 1s 1 alternate; /* CSS3 */ -webkit-animation:myani 3s ease 1s 1 alternate; /* Chrome, Safari */ -moz-animation:myani 3s ease 1s 1 alternate; /* Firefox */ -ms-animation:myani 3s ease 1s 1 alternate; /* IE */ -o-animation:myani 3s ease 1s 1 alternate; /* Opera */ animation-fill-mode:forwards; /* アニメーションを最後のフレームで停止 */ -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; } @keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} } #samples { width:500px; background:#000; } #samples div { margin:10px 0; padding:0; height:2em; line-height:2em; } /* samples */ #samples #linear { animation-timing-function:linear; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; -ms-animation-timing-function:linear; -o-animation-timing-function:linear; } #samples #ease { animation-timing-function:ease; -webkit-animation-timing-function:ease; -moz-animation-timing-function:ease; -ms-animation-timing-function:ease; -o-animation-timing-function:ease; } #samples #ease-in { animation-timing-function:ease-in; -webkit-animation-timing-function:ease-in; -moz-animation-timing-function:ease-in; -ms-animation-timing-function:ease-in; -o-animation-timing-function:ease-in; } #samples #ease-out { animation-timing-function:ease-out; -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; -ms-animation-timing-function:ease-out; -o-animation-timing-function:ease-out; } #samples #ease-in-out { animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; -moz-animation-timing-function:ease-in-out; -ms-animation-timing-function:ease-in-out; -o-animation-timing-function:ease-in-out; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-timing-function</h2> <p>アニメーションをどのように実行するか進捗方法を加速曲線で指定します。</p> <!-- CODE --> <p id="rgrp"> animation-timing-function: <label for="r1"><input type="radio" name="r" id="r1" value="linear">linear</label> <label for="r2"><input type="radio" name="r" id="r2" value="ease" checked="checked">ease</label> <label for="r3"><input type="radio" name="r" id="r3" value="ease-in">ease-in</label> <label for="r4"><input type="radio" name="r" id="r4" value="ease-out">ease-out</label> <label for="r5"><input type="radio" name="r" id="r5" value="ease-in-out">ease-in-out</label> </p> <div id="sample"> <p>Sample</p> </div> <hr /> <div id="samples"> <div id="linear">linear</div> <div id="ease">ease</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> <!-- CODE / --> </div> </body> </html>
animation-delay 
アニメーション開始の遅延時間
2011/12/1
-moz-animation-delay
-ms-animation-delay
-o-animation-delay
animation-delayプロパティは、アニメーションを開始するまでの時間(遅延時間)を指定します。
0を指定すると、すぐにアニメーションが開始します(デフォルト)。 すぐに開始するのでなく、ちょっと時間をおいてアニメーションをさせたい場合は、1s、500msなど秒あるいはミリ秒で遅延時間を指定します。
負の値を指定した場合は、その時間分経過したところからアニメーションが開始します。 (例えば「-1s」を指定すると、1秒進んだところからアニメーションが開始となります。)
- デフォルト値:0
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
time | 秒(単位:s)、ミリ秒(単位:ms)で指定。 単位を省略した場合は秒が適用。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-delay</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-delay",val); $obj.css("animation-delay",val); }); }); </script> <style type="text/css"> #sample { width:300px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 3s ease 1s 2 alternate ; /* CSS3 */ -webkit-animation:myani 3s ease 1s 2 alternate ; /* Chrome, Safari */ -moz-animation:myani 3s ease 1s 2 alternate ; /* Firefox */ -ms-animation:myani 3s ease 1s 2 alternate ; /* IE */ -o-animation:myani 3s ease 1s 2 alternate ; /* Opera */ } @keyframes myani { from {left:0px;} to {left:200px;} } @-webkit-keyframes myani { from {left:0px;} to {left:200px;} } @-moz-keyframes myani { from {left:0px;} to {left:200px;} } @-ms-keyframes myani { from {left:0px;} to {left:200px;} } @-o-keyframes myani { from {left:0px;} to {left:200px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-delay</h2> <p>アニメーションを開始するまでの時間(遅延時間)を指定します。</p> <!-- CODE --> <p id="rgrp"> animation-delay: <label for="r7"><input type="radio" name="r" id="r7" value="-2s">-2s</label> <label for="r6"><input type="radio" name="r" id="r6" value="-1s">-1s</label> <label for="r1"><input type="radio" name="r" id="r1" value="1s" checked="checked">1s</label> <label for="r2"><input type="radio" name="r" id="r2" value="2s">2s</label> <label for="r3"><input type="radio" name="r" id="r3" value="3s">3s</label> <label for="r4"><input type="radio" name="r" id="r4" value="4s">4s</label> <label for="r5"><input type="radio" name="r" id="r5" value="5s">5s</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-iteration-count 
アニメーションの繰り返し回数
2011/12/1
-moz-animation-iteration-count
-ms-animation-iteration-count
-o-animation-iteration-count
animation-iteration-countプロパティは、アニメーションの繰り返し回数を指定します。 無限に繰り返す場合は、infiniteを指定します。
- デフォルト値:1
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
number | アニメーションの繰り返し回数を指定。 負の値は0扱い。 |
infinite | アニメーションを無限に繰り返す。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-iteration-count</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-iteration-count",val); $obj.css("animation-iteration-count",val); }); }); </script> <style type="text/css"> #sample { width:500px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 3s ease 1s 1 alternate ; /* CSS3 */ -webkit-animation:myani 3s ease 1s 1 alternate ; /* Chrome, Safari */ -moz-animation:myani 3s ease 1s 1 alternate ; /* Firefox */ -ms-animation:myani 3s ease 1s 1 alternate ; /* IE */ -o-animation:myani 3s ease 1s 1 alternate ; /* Opera */ animation-fill-mode:forwards; /* アニメーションを最後のフレームで停止 */ -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; } @keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-iteration-count</h2> <!-- CODE --> <p id="rgrp"> animation-iteration-count: <label for="r1"><input type="radio" name="r" id="r1" value="1" checked="checked">1</label> <label for="r2"><input type="radio" name="r" id="r2" value="2">2</label> <label for="r3"><input type="radio" name="r" id="r3" value="infinite">infinite</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-direction 
アニメーションする方向
2011/12/1
-moz-animation-direction
-ms-animation-direction
-o-animation-direction
animation-directionプロパティは、アニメーションサイクルの方向を指定します。
アニメーションを繰り返す際、通常は毎回アニメーションの先頭に戻って再生しますが、alternateを指定すると、巻き戻しのようにアニメーションを逆再生してアニメーションの先頭に戻り、また再生する動きになります。
- デフォルト値:normal
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値 | 説明 |
---|---|
normal | アニメーションはデフォルトのサイクルで毎回再生する。 |
alternate | アニメーションのサイクルをデフォルト方向⇔逆方向に交互に再生する。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-direction</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("#rgrp input[type=radio]").click(function(){ var val=this.value; var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css(prefix+"animation-direction",val); $obj.css("animation-direction",val); }); }); </script> <style type="text/css"> #sample { width:500px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 3s linear 0 infinite; /* CSS3 */ -webkit-animation:myani 3s linear 0 infinite; /* Chrome, Safari */ -moz-animation:myani 3s linear 0 infinite; /* Firefox */ -ms-animation:myani 3s linear 0 infinite; /* IE */ -o-animation:myani 3s linear 0 infinite; /* Opera */ } @keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-direction</h2> <p>アニメーションする方向を指定します。デフォルト方向⇔逆交互に再生する場合は、alternateを指定します。</p> <!-- CODE --> <p id="rgrp"> animation-direction: <label for="r1"><input type="radio" name="r" id="r1" value="normal" checked="checked">normal</label> <label for="r2"><input type="radio" name="r" id="r2" value="alternate">alternate</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-fill-mode 
アニメーションのモードを指定
2011/12/1
-moz-animation-fill-mode
-ms-animation-fill-mode
-o-animation-fill-mode
animation-fill-modeプロパティは、アニメーションの実行前と実行後に適用するスタイルを指定します。
- デフォルト値:none
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
none | 適用しない。 |
forwards |
アニメーションの最後に適用されたキーフレームの指定によって試算された値を維持する。
通常、100%またはtoキーフレームになる。 ※animation-directionの値が 'alternate'でなおかつanimation-iteration-countの値が偶数の場合は、'0%'または'from'キーフレームになるため、アニメーションの最初のフレームで停止する。 |
backwords | アニメーションの適用先に、'0%'または'from'キーフレームで定義された値を即座に適用する。 animation-delayで指定した遅延時間の間も維持される。 |
both |
forwards、backwordsの両方のルールに従う。 アニメーションの設定は、実行前後に適用される。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-fill-mode</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ $("input[type=radio]").click(function(){ var _direction=$("input:radio[name=r3]:checked").val(); var _count=$("input:radio[name=r2]:checked").val(); var _mode=$("input:radio[name=r1]:checked").val(); var prefix=$.fn.VendorPrefix(); var rint = Math.round(0xffffff * Math.random()); var rgb='rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; $("#sample").find("p").remove(); var $obj=$("<p>Sample</p>").appendTo("#sample"); $obj.css("background-color",rgb); $obj.css("animation-direction",_direction); $obj.css(prefix+"animation-direction",_direction); $obj.css("animation-iteration-count",_count); $obj.css(prefix+"animation-iteration-count",_count); $obj.css("animation-fill-mode",_mode); $obj.css(prefix+"animation-fill-mode",_mode); }); }); </script> <style type="text/css"> #sample { width:500px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 2s linear 1s 1 normal; /* CSS3 */ -webkit-animation:myani 2s linear 1s 1 normal; /* Chrome, Safari */ -moz-animation:myani 2s linear 1s 1 normal; /* Firefox */ -ms-animation:myani 2s linear 1s 1 normal; /* IE */ -o-animation:myani 2s linear 1s 1 normal; /* Opera */ } @keyframes myani { from {left:0px;} to {left:400px;} } @-webkit-keyframes myani { from {left:0px;} to {left:400px;} } @-moz-keyframes myani { from {left:0px;} to {left:400px;} } @-ms-keyframes myani { from {left:0px;} to {left:400px;} } @-o-keyframes myani { from {left:0px;} to {left:400px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-fill-mode</h2> <!-- CODE --> <p id="rgrp3"> animation-direction: <label for="r31"><input type="radio" name="r3" id="r31" value="normal" checked="checked">normal</label> <label for="r32"><input type="radio" name="r3" id="r32" value="alternate">alternate</label> </p> <p id="rgrp2"> animation-iteration-count: <label for="r21"><input type="radio" name="r2" id="r21" value="1" checked="checked">1</label> <label for="r22"><input type="radio" name="r2" id="r22" value="2">2</label> <label for="r23"><input type="radio" name="r2" id="r23" value="3">3</label> <label for="r24"><input type="radio" name="r2" id="r24" value="infinite">infinite</label> </p> <p id="rgrp"> animation-fill-mode: <label for="r11"><input type="radio" name="r1" id="r11" value="none" checked="checked">none</label> <label for="r12"><input type="radio" name="r1" id="r12" value="forwards">forwards</label> <label for="r13"><input type="radio" name="r1" id="r13" value="backwords">backwords</label> <label for="r14"><input type="radio" name="r1" id="r14" value="both">both</label> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>
animation-play-state 
アニメーションの実行・一時停止
2011/12/1
-moz-animation-timing-funciton
-ms-animation-timing-funciton
-o-animation-timing-funciton
※他プロパティで代替できるため削除される可能性があり。
animation-play-stateプロパティは、アニメーションの状態を取得・設定します。
- デフォルト値:running
- 適用:ブロックレベル要素、インラインレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
running | アニメーションを再開する。 |
paused | アニメーションを一時停止する。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ×/IE9: ×
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>animation-play-state</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.vendorprefix.js"></script> <script type="text/javascript"> $(function(){ var prefix=$.fn.VendorPrefix(); var timer = setInterval(function(){ getPlayState(prefix); },100); $("#running").click(function(){ var $obj=$("#sample p"); $obj.css("animation-play-state",this.id); $obj.css(prefix+"animation-play-state",this.id); }); $("#paused").click(function(){ var $obj=$("#sample p"); $obj.css("animation-play-state",this.id); $obj.css(prefix+"animation-play-state",this.id); }); }); function getPlayState(prefix){ var _state=""; if($("#sample p").css("animation-play-state")){ _state=$("#sample p").css("animation-play-state"); } if($("#sample p").css(prefix+"animation-play-state")){ _state=$("#sample p").css(prefix+"animation-play-state"); } $("#state").html(_state); } </script> <style type="text/css"> #sample { width:300px; height:300px; background:#eee; } #sample p { margin:0; padding:0; width:100px; height:100px; background:#ccc; position:relative; line-height:100px; text-align:center; font-weight:bold; animation:myani 5s ease 1s infinite alternate; /* CSS3 */ -webkit-animation:myani 5s ease 1s infinite alternate; /* Chrome, Safari */ -moz-animation:myani 5s ease 1s infinite alternate; /* Firefox */ -ms-animation:myani 5s ease 1s infinite alternate; /* IE */ -o-animation:myani 5s ease 1s infinite alternate; /* Opera */ } @keyframes myani { from {left:0px;} to {left:200px;} } @-webkit-keyframes myani { from {left:0px;} to {left:200px;} } @-moz-keyframes myani { from {left:0px;} to {left:200px;} } @-ms-keyframes myani { from {left:0px;} to {left:200px;} } @-o-keyframes myani { from {left:0px;} to {left:200px;} } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>animation-play-state</h2> <p>アニメーションの実行・一時停止を取得・設定します。</p> <!-- CODE --> <p> animation-play-state: <input type="button" id="running" value="再開" /> <input type="button" id="paused" value="停止" /> </p> <p> 実行状態: <span id="state"></span> </p> <div id="sample"> <p>Sample</p> </div> <!-- CODE / --> </div> </body> </html>