動畫

animation: 動畫名稱   花費的時間      運動的曲線(動畫的運動速度) 
            何時開始(是否有延遲)      播放次數        播放完後是否相反(預設是從正向);

注意第6個參數。預設是永遠正向播放。
alternate 是第一次正向播放，第二次反向播放。
alternate-reverse   是第一次反向播放，第二次正向播放

-webkit-animation: move 1.6s linear 0s infinite;是為了相容谷歌。safira浏覽器哈。
通過字首來相容哈。
           

效果：div從left=0的位置,跑到left=400，顔色從pink變成red，動畫執行無數次。運動速度勻速:
  <style>
        .demo {
            text-align: center;
            line-height: 40px;
            width: 100px;
            height: 40px;
            background: pink;
            position: absolute;
            left: 0;
            /* 定義動畫的規制 linear勻速運動*/
            animation: move 1.6s linear 0s infinite;
            //動畫名稱move   動畫執行的時間是1.6s  勻速（linear） 0s(不延遲)   infinite(動畫執行無數次)
        }
        //調用動畫
        @keyframes move {
            from {
                left: 0;
                background: pink;
            }

            to {
                left: 400px;
                background: red;
            }
        }
    </style>
           

<div class="demo">
        我是動畫
</div>
           

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。