Rumah  >  Artikel  >  hujung hadapan web  >  Apakah faedah animasi dalam css3

Apakah faedah animasi dalam css3

青灯夜游
青灯夜游asal
2022-01-13 16:04:421832semak imbas

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>

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:

1.

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn