css3動畫寫法

時間 2019-11-12

標籤 css3 css 動畫寫法欄目 CSS 简体版

原文原文鏈接

今天本身摸索了一下css3動畫的寫法，主要是兼容w3c和WebKit引擎寫法。如下是我簡單的實現了一個循環播放的家在動畫，代碼以下：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>chasing dot</title>
        <style type="text/css">
            .spiner{//定義容器
                margin:100px auto;
                width:40px;
                height:40px;
                position:relative;
                text-align:center;
                
                -webkit-animation:rotate 2s infinite linear;//容器加載旋轉動畫，用時2s，無限循環，線性速度
                animation:rotate 2s infinite linear;
            }
            .dot1, .dot2{//定義運動元素 能夠採用僞元素來代替
                position: absolute;
                width:60%;
                height:60%;
                display:inline-block;
                top:0;
                background-color:#333;
                border-radius:100%;
                
                -webkit-animation: zoom 2s infinite linear;//運動加載縮放動畫，用時2S,無限循環，線性速度
                animation: zoom 2s infinite linear;
            }
            .dot2{
                top:auto;
                bottom:0;
                -webkit-animation-delay:-1.0s;
                animation-delay:-1.0s;
            }
            @-webkit-keyframes rotate{//定義旋轉動畫（兼容WebKit寫法）
                100%{-webkit-transform:rotate(360deg)}
            }
            @keyframes rotate{//兼容w3c寫法
                100%{
                    transform:rotate(360deg);
                -webkit-transform: rotate(360deg);
                }
            }
            @-webkit-keyframes zoom{//定義縮放動畫（兼容WebKit寫法）
                0%,100%{-webkit-transform:scale(0.0)}
                50%{-webkit-transform:scale(1.0)}
            }
            @keyframes zoom{//兼容W3C寫法
                0%,100%{
                    transform:scale(0.0);
                    -webkit-transform:scale(0.0);
                }
                50%{
                    transform:scale(1.0);
                    -webkit-transform:scale(1.0);
                } 
            }
        </style>
    </head>
    <body>
        <div class="spiner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </body>
</html>

效果爲：html

其中，動畫的運動速度是參數：css3

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

是否是很明瞭，記錄一下，go on,fighting!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。