スタイルシート（CSS）｜PHP & JavaScript Room

@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

@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
アニメーションプロパティの一括指定

2011/12/1

animation: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [ ... ] ]*

-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
アニメーション名

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
アニメーション完了までの時間

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
アニメーションの進行割合

2011/12/1

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

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
アニメーションの繰り返し回数

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
アニメーションする方向

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
アニメーションのモードを指定

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
アニメーションの実行・一時停止

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>

Background - 背景 Background - 背景

PHP & JavaScript Room

Animation - アニメーション

@keyframes
キーフレーム定義

サポート

設置サンプル

animation
アニメーションプロパティの一括指定

サポート

設置サンプル

animation-name
アニメーション名

値

サポート

設置サンプル

animation-duration
アニメーション完了までの時間

値

サポート

設置サンプル

animation-timing-function
アニメーションの進行割合

値

サポート

設置サンプル

animation-delay
アニメーション開始の遅延時間

値

サポート

設置サンプル

animation-iteration-count
アニメーションの繰り返し回数

値

サポート

設置サンプル

animation-direction
アニメーションする方向

サポート

設置サンプル

animation-fill-mode
アニメーションのモードを指定

値

サポート

設置サンプル

animation-play-state
アニメーションの実行・一時停止

値

サポート

設置サンプル

関連コンテンツ

Animation - アニメーション

@keyframes キーフレーム定義

サポート

設置サンプル

animation アニメーションプロパティの一括指定

サポート

設置サンプル

animation-name アニメーション名

値

サポート

設置サンプル

animation-duration アニメーション完了までの時間

値

サポート

設置サンプル

animation-timing-function アニメーションの進行割合

値

サポート

設置サンプル

animation-delay アニメーション開始の遅延時間

値

サポート

設置サンプル

animation-iteration-count アニメーションの繰り返し回数

値

サポート

設置サンプル

animation-direction アニメーションする方向

サポート

設置サンプル

animation-fill-mode アニメーションのモードを指定

値

サポート

設置サンプル

animation-play-state アニメーションの実行・一時停止

値

サポート

設置サンプル

関連コンテンツ

@keyframes
キーフレーム定義

animation
アニメーションプロパティの一括指定

animation-name
アニメーション名

animation-duration
アニメーション完了までの時間

animation-timing-function
アニメーションの進行割合

animation-delay
アニメーション開始の遅延時間

animation-iteration-count
アニメーションの繰り返し回数

animation-direction
アニメーションする方向

animation-fill-mode
アニメーションのモードを指定

animation-play-state
アニメーションの実行・一時停止