Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apa yang digunakan untuk menentukan masa animasi peralihan dalam css3

Apa yang digunakan untuk menentukan masa animasi peralihan dalam css3

青灯夜游asal: 2022-02-28 13:35:375113semak imbas

Dalam CSS3, anda boleh menggunakan atribut tempoh peralihan untuk menentukan masa animasi peralihan Atribut ini boleh menentukan masa yang diperlukan untuk menyelesaikan kesan peralihan (dalam saat atau milisaat). "tempoh peralihan: masa;".

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

Dalam CSS3, anda boleh menggunakan atribut tempoh peralihan untuk menentukan masa animasi peralihan.

Pengenalan peralihan

Peralihan mempersembahkan peralihan, proses penukaran animasi, seperti fade-in, fade-out, animasi Tunggu dengan cepat dan perlahan-lahan.

Fungsi peralihan peralihan CSS3 lebih seperti "mentega", mencetuskan peralihan gaya yang lancar melalui beberapa tindakan CSS mudah.

1. Sifat peralihan (sifat peralihan) mentakrifkan nama sifat CSS bagi animasi peralihan

IDENT: sifat CSS yang ditentukan (lebar, tinggi, sifat warna latar belakang , dsb. )

semua: Tentukan gaya semua elemen yang menyokong atribut peralihan-sifat Secara umumnya, semua

digunakan untuk kemudahan 2. Masa yang diperlukan untuk peralihan (tempoh peralihan) mentakrifkan animasi peralihan Tempoh masa

ialah masa yang diambil daripada menetapkan atribut lama kepada menggantikan atribut baharu, dalam saat (s)

3. Fungsi animasi peralihan (fungsi pemasaan peralihan )

Nyatakan kelajuan peralihan pelayar dan kemajuan operasi semasa peralihan dengan menambahkan fungsi kepada peralihan

常见的过渡动画
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

4 Masa tunda peralihan ( peralihan-tunggu )

Nyatakan masa apabila animasi mula dilaksanakan, dan berapa lama masa yang diperlukan untuk melaksanakan kesan peralihan selepas menukar nilai atribut elemen
Nilai positif: Kesan peralihan elemen tidak akan dicetuskan serta-merta telah melepasi
Nilai negatif: Kesan peralihan elemen Ia akan dipaparkan dari titik masa ini dan tindakan sebelumnya dipotong
0: Nilai lalai, kesan peralihan elemen dilaksanakan serta-merta

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>transition-property的使用</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            /*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/
            transition:  background-color 2s ease-in-out 3s;
            -moz-transition:  background-color 2s ease-in-out 3s;
            -webkit-transition:  background-color 2s ease-in-out 3s;
            -o-transition:  background-color 2s ease-in-out 3s;
        }
        div:hover{
            background-color: yellow;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Mekanisme pencetus peralihan

Jika tiada kesan pergerakan tetikus untuk mencetuskan peralihan, dalam hakikatnya, div tidak akan berubah sama sekali. Tuding kelas pseudo ialah sejenis mekanisme peralihan yang mencetuskan. Apakah kaedah pencetus lain yang ada?

Pertanyaan media: Tentukan saiz, orientasi, dsb. peranti melalui atribut @media.
Pencetus JavaScript: Pencetus dengan skrip JavaScript.
Berikut ialah ringkasan langkah untuk menggunakan peralihan untuk melaksanakan animasi peralihan:

(2) Isytiharkan gaya keadaan akhir unsur peralihan, seperti keadaan digantung.

(3) Tambahkan beberapa gaya berbeza dengan menambahkan fungsi peralihan kepada gaya lalai.

(Mempelajari perkongsian video:

tutorial video css

tutorial pengenalan bahagian hadapan web

)

Atas ialah kandungan terperinci Apa yang digunakan untuk menentukan masa animasi peralihan 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

Artikel sebelumnya：Adakah mengubah atribut baru dalam css3?Artikel seterusnya：Adakah mengubah atribut baru dalam css3?

Artikel berkaitan

Lihat lagi