Apakah faedah animasi dalam css3-Soal Jawab bahagian hadapan-php.cn

Apakah faedah animasi dalam css3

青灯夜游

Lepaskan： 2022-01-13 16:04:42

asal

1844 orang telah melayarinya

Faedah animasi CSS3: 1. Penyemak imbas boleh mengoptimumkan animasi (tiada animasi apabila elemen tidak kelihatan, mengurangkan kesan pada FPS 2. Kod pelaksanaannya agak mudah; 3. Pecutan perkakasan boleh; digunakan; 4. Tidak menduduki benang utama.

Apakah faedah animasi dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Secara umumnya, terdapat hanya tiga sifat animasi CSS3: transformasi, peralihan dan animasi.

peralihan:1s (kesan animasi peralihan): daripada nilai khusus seseorang kepada nilai peralihan yang lain

transformasi:putar(300deg) x,y perubahan putaran:putaranX (300deg) transformasi :rotageY(300deg)

transform:scale(0.5,2) Skala paksi-x, paksi-y>1 zum masuk<1 zum keluar

transform:translateX(100px) terjemah x- transformasi paksi:terjemahY(100px) Terjemah paksi-y

transformasi:terjemah(100px 100px) Terjemah x, paksi-y

peralihan:putar(300deg) skala(0.5,2) semasa menskala , Putar sambil

transition:transform 1s menentukan kesan pada transform

transition:margin 1s menentukan kesan pada margin dan secara langsung menukar saiz dan kedudukan, menunjukkan struktur yang diubah, tanpa peralihan dan ubah bentuk masa

Fokus animasi adalah pada garis masa dan bingkai utama, iaitu untuk mencipta bingkai supaya bingkai yang berbeza berubah secara berbeza pada nod masa yang berbeza Di satu pihak, animasi berdasarkan animasi dan @keyframe juga bertujuan mencapai pemisahan prestasi dan tingkah laku

Contoh kecil

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

Salin selepas log masuk

Faedah menggunakan css3 untuk melaksanakan animasi

1 . Pelayar boleh mengoptimumkan animasi (elemen Tiada animasi apabila tidak kelihatan, mengurangkan kesan pada FPS)

2 Kod pelaksanaannya agak mudah

3 >4. Tidak menduduki urutan utama

Kelemahan:

2. Kawalan animasi tidak cukup fleksibel, proses berjalan lemah, ia tidak boleh melampirkan fungsi panggil balik yang mengikat, tidak boleh menambah fungsi panggil balik pada kedudukan tertentu atau mengikat acara main balik dan tiada kemajuan laporan.

(Mempelajari perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci Apakah faedah animasi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!