Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3

WBOY

Lepaskan： 2022-04-28 16:32:12

asal

2864 orang telah melayarinya

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. Sintaks ialah "elemen {animation- timing-function:speed attribute value;}".

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3

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

Cara menetapkan kelajuan putaran animasi dalam css3

fungsi pemasaan-animasi menentukan cara animasi akan melengkapkan kitaran.

Keluk halaju mentakrifkan tempoh masa yang diambil untuk animasi bertukar daripada satu set gaya CSS kepada yang lain.

Keluk kelajuan digunakan untuk membuat perubahan lebih lancar.

Nilai lalai: ease

Sintaksnya ialah:

animation-timing-function: value;

Salin selepas log masuk

Fungsi matematik yang digunakan oleh fungsi pemasaan animasi dipanggil lengkung Bezier kubik, lengkung kelajuan . Menggunakan fungsi ini, anda boleh menggunakan nilai anda sendiri atau menggunakan salah satu nilai yang dipratentukan:

Nilai hartanah adalah seperti berikut:

linear Kelajuan animasi dari awal hingga akhir adalah sama. uji
mudahkan lalai. Animasi bermula pada kelajuan perlahan, kemudian dipercepatkan, kemudian perlahan sebelum tamat. Uji
kemudahan masuk Animasi bermula pada kelajuan perlahan. Ujian
animasi ease-out tamat pada kelajuan rendah. Uji
animasi mudah masuk bermula dan tamat pada kelajuan perlahan. Ujian
langkah(int,mula|tamat) menentukan bilangan selang (langkah) dalam fungsi masa. Terdapat dua parameter Parameter pertama menentukan bilangan selang fungsi, iaitu integer positif (lebih besar daripada 0). Parameter kedua adalah pilihan dan menunjukkan sama ada animasi berterusan dari awal atau akhir tempoh masa. Maksudnya adalah seperti berikut: mula: bermaksud bermula secara langsung. tamat: Nilai lalai, menunjukkan penamat yang mendadak.
kubik-bezier(n,n,n,n) Nilai sendiri dalam fungsi kubik-bezier. Nilai yang mungkin adalah nilai angka dari 0 hingga 1.

Contohnya seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s;
            animation-timing-function:ease-in-out;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
.div2{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenums 5s;
            animation-timing-function:linear;
        }
        @keyframes fadenums{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div class="div1"></div><br><br>
    <div class="div2"></div>
</body>
</html>

Salin selepas log masuk

Hasil output:

(Pembelajaran perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!