Rumah > Artikel > hujung hadapan web > Apakah faedah animasi dalam css3
Apakah faedah animasi dalam css3
- 青灯夜游asal
- 2022-01-13 16:04:421843semak 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.
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 cssAtas ialah kandungan terperinci Apakah faedah animasi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!