ウェブ

CSSアニメーションサンプル

  • このエントリーをはてなブックマークに追加

サンプルアニメーション

四角形をクリックしてみてください。

transform

四角形にマウスをポイントしてみてください。

transition

マウス操作と無関係に、アニメーションを繰り返します。

animation

コード

コードは、サイト掲載用に一部変更してあります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
                display: table-cell;
                font-size: 3vh;
                text-align: center;
                vertical-align: middle;
                width: 10vw;
                height: 10vw;
                border: 1px black solid;
                background-color: green;
                color: yellow;
            }

            #transf:actiove{
                /* 座標空間の変更 */
                transform: rotate(45deg);
                /*
                matrix() 行列変換
                perspective() z=0平面との間の距離を設定します。
                rotate() 回転
                rotateX() 水平軸を中心に回転します。
                rotateY() 垂直軸を中心に回転します。
                rotateZ() Z 軸を中心に回転します。
                scale() 拡大縮小
                scaleX() 水平に拡大または縮小します。
                scaleY() 垂直に拡大または縮小します。
                scaleZ() Z軸方向に拡大または縮小します。
                skew() 二次元平面上で歪ませます。
                skewX() 水平方向に歪ませます。
                skewY() 垂直方向に歪ませます。
                translate() 平行移動
                translateX() 水平方向に平行移動させます。
                translateY() 垂直方向に平行移動させます。
                translateZ() Z軸方向に平行移動させます。
                */
            }

            #transi{
                /* transition は、要素の 2状態間の遷移を定義 */
                transition-delay: 1s; /* 遅延 */
                transition-duration: 0.5s; /* 遷移時間 */
                transition-property: background-color, color; /* 対象CSSプロパティ */
                transition-timing-function: ease; 
                /* 
                ease 簡易な徐々
                ease-in 徐々に入る
                ease-out 徐々に出る
                ease-in-out 徐々に出入り
                linear 直線的
                step-start 先頭へジャンプ
                step-end    最後へジャンプ
                */
            }
            #transi:hover{
                background-color: red;
                color: white;
            }

            #anime{
                animation-delay: 1s;/* 遅延 */
                animation-direction: alternate; 
                /* 
                normal 正順
                reverse 逆順
                alternate 正逆交互
                alternate-reverse 逆正交互
                */
                animation-duration: 5s; /* 遷移時間 */
                animation-fill-mode: backwards; 
                /* 
                none アニメーション実行時以外はスタイル適用無し
                forwards アニメーションの最後のスタイルを保持
                backwards アニメーションの最初のスタイルに戻る
                both アニメーションの前(delay)と後にスタイルを保持
                */
                animation-iteration-count: infinite; /* 繰り返し回数 */
                animation-name: changecolor; /* @keyframes からの参照名 */
                animation-play-state: running;
                /* 
                paused 一時停止
                running 再生
                */
                animation-timing-function: ease; 
                /* 
                ease 簡易な徐々
                ease-in 徐々に入る
                ease-out 徐々に出る
                ease-in-out 徐々に出入り
                linear 直線的
                step-start 先頭へジャンプ
                step-end    最後へジャンプ
                */
            }
            @keyframes changecolor {

                from{
                    background-color: blue;
                }
                to{
                    background-color: orange;
                }


                0%{
                    transform: scale(100%);
                }
                33%{
                    transform: scale(80%) rotate(-45deg);
                }
                66%{
                    transform: scale(200%) rotate(45deg);
                }
                100%{
                    transform: scale(50%);
                }

            }
            .wrapper{
                display: block;
                background-color: unset;
                border: 0;
                margin: 5vh auto;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div id="transf">transform</div>
        </div>
        <div class="wrapper">
            <div id="transi">transition</div>
        </div>
        <div class="wrapper">
            <div id="anime">animation</div>
        </div>
    </body>
</html>

  • このエントリーをはてなブックマークに追加

記事を検索

コメントを残す

*

CAPTCHA