Search
  1. @keyframes CSS3~〔キーフレーム定義〕
  2. animation CSS3~〔アニメーションプロパティの一括指定〕
  3. animation-name CSS3~〔アニメーション名〕
  4. animation-duration CSS3~〔アニメーション完了までの時間〕
  5. animation-timing-function CSS3~〔アニメーションの進行割合〕
  6. animation-delay CSS3~〔アニメーション開始の遅延時間〕
  7. animation-iteration-count CSS3~〔アニメーションの繰り返し回数〕
  8. animation-direction CSS3~〔アニメーションする方向〕
  9. animation-fill-mode CSS3~〔アニメーションのモードを指定〕
  10. animation-play-state CSS3~〔アニメーションの実行・一時停止〕

@keyframes CSS3~
キーフレーム定義

2011/12/1

@keyframes アニメーションの名前: {}
@-webkit-keyframes
@-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 CSS3~
アニメーションプロパティの一括指定

2011/12/1

-webkit-animation
-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>&hearts;</p>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

animation-name CSS3~
アニメーション名

2011/12/1

animation-name: none | <name> [, ... ]*
-webkit-animation-name
-moz-animation-name
-ms-animation-name
-o-animation-name

animation-nameプロパティは、アニメーションの名前(@keyframesの名前)を指定します。

  • デフォルト値:none
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-delayプロパティの値
説明
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 CSS3~
アニメーション完了までの時間

2011/12/1

animation-duration: <time> [, ... ]*
-webkit-animation-duration
-moz-animation-duration
-ms-animation-duration
-o-animation-duration

animation-durationプロパティは、アニメーションサイクル(1周期分)が完了するのにかかる時間を指定します。 0を指定した場合は、即時となるため、アニメーションなしとなります。

  • デフォルト値:0
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-durationプロパティの値
説明
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 CSS3~
アニメーションの進行割合

2011/12/1

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ... ]*
-webkit-animation-timing-funciton
-moz-animation-timing-funciton
-ms-animation-timing-funciton
-o-animation-timing-funciton

animation-timing-funcitonプロパティは、アニメーションをどのように実行するか進捗方法を加速曲線で指定します。 transition-timing-functionと同じ値を取ります。 このプロパティは、アニメーション全体ではなく、キーフレーム毎に適用されます。

  • デフォルト値:ease
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-timing-funcitonプロパティの値
説明
easecubic-bezier(0.0, 0.0, 1.0, 1.0)を表す。
linearcubic-bezier(0.25, 0.1, 0.25, 1.0)を表す。
ease-incubic-bezier(0.42, 0.0, 1.0, 1.0)を表す。
ease-outcubic-bezier(0.0, 0.0, 0.58, 1.0)を表す。
ease-in-outcubic-bezier(0.42, 0.0, 0.58, 1.0)を表す。
cubic-bezier3次ベジェ曲線。
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 CSS3~
アニメーション開始の遅延時間

2011/12/1

animation-delay: <time> [, ... ]*
-webkit-animation-delay
-moz-animation-delay
-ms-animation-delay
-o-animation-delay

animation-delayプロパティは、アニメーションを開始するまでの時間(遅延時間)を指定します。

0を指定すると、すぐにアニメーションが開始します(デフォルト)。 すぐに開始するのでなく、ちょっと時間をおいてアニメーションをさせたい場合は、1s、500msなど秒あるいはミリ秒で遅延時間を指定します。

負の値を指定した場合は、その時間分経過したところからアニメーションが開始します。 (例えば「-1s」を指定すると、1秒進んだところからアニメーションが開始となります。)

  • デフォルト値:0
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-delayプロパティの値
説明
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 CSS3~
アニメーションの繰り返し回数

2011/12/1

animation-iteration-count: infinite | <number> [, ... ]*
-webkit-animation-iteration-count
-moz-animation-iteration-count
-ms-animation-iteration-count
-o-animation-iteration-count

animation-iteration-countプロパティは、アニメーションの繰り返し回数を指定します。 無限に繰り返す場合は、infiniteを指定します。

  • デフォルト値:1
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-iteration-countプロパティの値
説明
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 CSS3~
アニメーションする方向

2011/12/1

animation-direction: normal | alternate [, ... ]*
-webkit-animation-direction
-moz-animation-direction
-ms-animation-direction
-o-animation-direction

animation-directionプロパティは、アニメーションサイクルの方向を指定します。

アニメーションを繰り返す際、通常は毎回アニメーションの先頭に戻って再生しますが、alternateを指定すると、巻き戻しのようにアニメーションを逆再生してアニメーションの先頭に戻り、また再生する動きになります。

  • デフォルト値:normal
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない
animation-directionプロパティの値
説明
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 CSS3~
アニメーションのモードを指定

2011/12/1

animation-fill-mode: none | forwards | backwards | both [, ... ]*
-webkit-animation-fill-mode
-moz-animation-fill-mode
-ms-animation-fill-mode
-o-animation-fill-mode

animation-fill-modeプロパティは、アニメーションの実行前と実行後に適用するスタイルを指定します。

  • デフォルト値:none
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-fill-modeプロパティの値
説明
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 CSS3~
アニメーションの実行・一時停止

2011/12/1

animation-play-state: running | paused [, ... ]*
-webkit-animation-timing-funciton
-moz-animation-timing-funciton
-ms-animation-timing-funciton
-o-animation-timing-funciton

※他プロパティで代替できるため削除される可能性があり。

animation-play-stateプロパティは、アニメーションの状態を取得・設定します。

  • デフォルト値:running
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

animation-play-stateプロパティの値
説明
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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop