幾個簡單的css動畫

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                height: 100vh;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            div {
                width: 100px;
                height: 100px;
                background-color: aqua;
            }
            .rotate {
                animation: ani_rotate infinite 3s;
            }
            .move {
                animation: ani_move infinite 3s linear;
            }
            .hide {
                animation: ani_hide 3s infinite;
            }
            .jump {
                animation: ani_jump 3s ease-in infinite;
            }
            /* 旋轉動畫 */
            @keyframes ani_rotate {
                0% {
                    background-color: aqua;
                }
                50% {
                    background-color: limegreen;
                    transform: scale(0.8) rotate(90deg);
                }
                100% {
                    background-color: aqua;
                    transform: scale(1) rotate(180deg);
                }
            }
            /* 移動 */
            @keyframes ani_move {
                0% {
                    transform: translateX(0);
                }
                50% {
                    transform: translateX(100px);
                }
                100% {
                    transform: translateX(0);
                }
            }
            /* 隱藏*/
            @keyframes ani_hide {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }
            /* 彈跳 */
            @keyframes ani_jump {
                0% {
                    transform: translateY(-100px);
                }
                25% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-60px);
                }
                75% {
                    transform: translateY(0);
                }
                90% {
                    transform: translateY(-10px);
                }
                100% {
                    transform: translateY(0);
                }
            }
        </style>
    </head>
    <body>
        <div class="rotate"></div>
        <div class="move"></div>
        <div class="hide"></div>
        <div class="jump"></div>
    </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章