使用css3實現(xiàn)動畫有哪些好處

發(fā)布時間：2022-01-13 16:35:51 來源：億速云閱讀：147 作者：小新欄目：web開發(fā)

這篇文章主要介紹使用css3實現(xiàn)動畫有哪些好處，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css3實現(xiàn)動畫的好處：1、瀏覽器可以對動畫進行優(yōu)化（元素不可見時不動畫，減少對FPS的影響）；2、實現(xiàn)代碼比較簡單；3、可以利用硬件加速；4、不占用主線程。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3動畫的屬性總的來說只有transform(變形)，transition(過渡)，和animation(動畫)這三種。

transition:1s(過渡的動畫效果)：從一個人具體的值到另一個過渡的值

transform:rotate(300deg) x,y 旋轉(zhuǎn) transform:rotageX(300deg) transform:rotageY(300deg)

transform:scale(0.5,2) 縮放x軸，y軸 >1放大 <1縮小

transform:translateX(100px)平移x軸 transform:translateY(100px) 平移y軸

transform:translate(100px 100px) 平移x,y軸

transition:rotate(300deg) scale(0.5,2) 一邊縮放，一邊旋轉(zhuǎn)

transition:transform 1s 指定對transform 起效果

transition:margin 1s 指定對margin 起效果接改變大小和位置，顯示改變的結(jié)構(gòu)，沒有過渡和形變時間

animation重點是在時間軸和關(guān)鍵幀,是在于創(chuàng)建幀，讓不同幀在不同的時間節(jié)點發(fā)生不同變化，基于animation和@keyframe 的動畫一方面也是為了實現(xiàn)表現(xiàn)與行為的分離

小例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逐幀動畫</title>
    <style type="text/css">
        .a{
            width: 1000px;
            height: 400px;
            background: #bbb;
            position: relative;
            margin: 100px auto;
            overflow: hidden;

        }
        .b{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            top:-150px;
            left: 50px;
            text-align: center;
            background: #aaa;
            line-height: 150px;
            animation:s 2s infinite;
        }   
        .c{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            bottom:-150px;
            right: 50px;
            background: #ccc;
            line-height: 150px;
            animation:ss 2s infinite;
        }
        @keyframes ss{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(-90px);
                background: #7dd;
            }
            50%{
                transform:translateY(-150px);
                background: #3aa;
            }
        }
        @keyframes s{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(90px);
                background: #7dd;
            }
            50%{
                transform:translateY(150px);
                background: #3aa;
            }
        }
    </style>
</head>
<body>
    <header>
        <div>
            <div>啦啦啦啦啦啦啦啦</div>
            <div>啦啦啦啦啦啦啦啦</div>
        </div>
    </header>
</body>
</html>

使用css3實現(xiàn)動畫的好處

1、瀏覽器可以對動畫進行優(yōu)化（元素不可見時不動畫，減少對FPS的影響）

2、實現(xiàn)代碼比較簡單

3、可以利用硬件加速

4、不占用主線程

缺點：

1、兼容性不好。

2、在動畫控制上不夠靈活，運行過程較弱，無法附加綁定回調(diào)函數(shù)，不能在特定的位置上添加回調(diào)函數(shù)或是綁定回放事件，無進度報告。

以上是“使用css3實現(xiàn)動畫有哪些好處”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

使用css3實現(xiàn)動畫有哪些好處

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽