css3實現動畫的好處有哪些-前端問答-PHP中文網

css3實現動畫的好處有哪些

青灯夜游

發布： 2022-01-13 16:04:42

原創

1971 人瀏覽過

css3實現動畫的好處：1、瀏覽器可以對動畫進行最佳化（元素不可見時不動畫，減少對FPS的影響）；2、實現程式碼比較簡單；3、可以利用硬體加速； 4、不佔用主線程。

css3實現動畫的好處有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

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

transform:rotate(300deg) x,y 旋轉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) 一邊縮放，一邊旋轉

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

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

animation重點是在時間軸和關鍵幀,是在於創建幀，讓不同幀在不同的時間節點發生不同變化，基於animation和@keyframe 的動畫一方面也是為了實現表現與行為的分離

小範例

<!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>