เปลี่ยน CSS3

CSS3 เราต้องเพิ่มผลที่สามารถแปลงจากรูปแบบหนึ่งไปยังอีกครั้งโดยไม่ต้องใช้ภาพเคลื่อนไหว Flash หรือจาวาสคริปต์ เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:

เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:

CSS3
การเปลี่ยนแปลง

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

属性
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

มันทำงานอย่างไร?

การเปลี่ยนแปลง CSS3 เป็นองค์ประกอบค่อยๆเปลี่ยนจากรูปแบบหนึ่งที่มีผลอีก

เพื่อให้บรรลุนี้สองสิ่งที่ต้องมีการกำหนด:

ฉันต้องการที่จะเพิ่มผลของคุณสมบัติของ CSS
ระบุระยะเวลาของผลกระทบที่

ตัวอย่าง

แอตทริบิวต์ความกว้างใช้ผลการเปลี่ยนแปลงระยะเวลา 2 วินาที:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

หมายเหตุ: หากคุณไม่ได้ระบุระยะเวลาการเปลี่ยนแปลงจะไม่มีผลกระทบเพราะค่าเริ่มต้นคือ 0

ผลจะเปลี่ยนค่าของการเปลี่ยนแปลงที่ระบุคุณสมบัติ CSS ที่ การเปลี่ยนแปลงคุณสมบัติ CSS ทั่วไปคือเมาส์ผู้ใช้มากกว่าองค์ประกอบ:

ตัวอย่าง

บทบัญญัติเมื่อระงับชี้เมาส์ (: โฉบ) ที่ <div> เมื่อ:

div: เลื่อนเมาส์
{
width: 300px;
}

ลอง»

หมายเหตุ: เมื่อเคอร์เซอร์ของเมาส์ไปยังองค์ประกอบก็ค่อยๆเปลี่ยนรูปแบบเดิม

จำนวนของการเปลี่ยนแปลง

หากต้องการเพิ่มมากกว่าหนึ่งผลของรูปแบบการเปลี่ยนแปลงเพิ่มแอตทริบิวต์คั่นด้วยเครื่องหมายจุลภาค:

ตัวอย่าง

เพิ่มผลกระทบความกว้างความสูงและการเปลี่ยนแปลง:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

ลอง»

คุณสมบัติการเปลี่ยน

ตารางต่อไปนี้แสดงคุณสมบัติการเปลี่ยนแปลง:

คุณสมบัติ	ลักษณะ	CSS
การเปลี่ยนแปลง	สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าคุณสมบัติที่สี่การเปลี่ยนแปลงในสถานที่ให้บริการ	3
สถานที่ให้บริการการเปลี่ยนแปลง	ชื่อของ CSS คุณสมบัติบทบัญญัติเปลี่ยนแปลงมีผลบังคับใช้	3
การเปลี่ยนแปลงระยะเวลา	เพื่อกำหนดเวลาผลการเปลี่ยนแปลงที่ใช้ เริ่มต้นเป็น 0	3
การเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น	ที่กำหนดไว้เปลี่ยนแปลงโค้งเวลามีผลบังคับใช้ ค่าเริ่มต้นคือ "ความสะดวก"	3
การเปลี่ยนแปลงความล่าช้า	บทบัญญัติเมื่อเริ่มต้นผลการเปลี่ยนแปลง เริ่มต้นเป็น 0	3

สองตัวอย่างต่อไปตั้งค่าคุณสมบัติการเปลี่ยนแปลงทั้งหมด:

ตัวอย่าง

ใช้คุณสมบัติการเปลี่ยนแปลงในตัวอย่างที่หนึ่ง:

div
{
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;
}

ลอง»