Rumah > Artikel > hujung hadapan web > Berapakah jenis sifat peralihan css3 yang terdapat?

Berapakah jenis sifat peralihan css3 yang terdapat?

青灯夜游asal: 2022-03-18 16:58:163188semak imbas

Terdapat 5 jenis sifat peralihan css3: 1. peralihan; 3. tempoh peralihan; 4. fungsi peralihan;

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

Peralihan CSS membolehkan anda menukar nilai hartanah dengan lancar dalam tempoh masa tertentu.

Terdapat 5 jenis sifat peralihan css3:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

Peralihan CSS3 ialah kesan elemen yang berubah secara beransur-ansur dari satu gaya ke gaya yang lain.

Untuk mencapai ini, dua perkara mesti ditentukan:

Nyatakan sifat CSS untuk menambah kesan
Nyatakan tempoh kesan.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	width:200px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>
</html>

Berapakah jenis sifat peralihan css3 yang terdapat?

(Belajar perkongsian video: tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Berapakah jenis sifat peralihan css3 yang terdapat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 Property function transition

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：Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3Artikel seterusnya：Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3

Artikel berkaitan

Lihat lagi