ภาพเคลื่อนไหว CSS3

ภาพเคลื่อนไหว CSS3

CSS3 เราสามารถสร้างภาพเคลื่อนไหวที่สามารถแทนที่หลายหน้าภาพเคลื่อนไหว, ภาพเคลื่อนไหว Flash และ javascripts

CSS3 @keyframes กฎ

การสร้างภาพเคลื่อนไหว CSS3, คุณจะต้องเรียนรู้กฎ @keyframes

@keyframes กฎคือการสร้างภาพเคลื่อนไหว ระบุลักษณะ CSS และภาพเคลื่อนไหวจะค่อยๆเปลี่ยนเป็นรูปแบบใหม่จากรูปแบบปัจจุบันภายในกฎ @keyframes

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

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

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

ตัวอย่าง

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

ภาพเคลื่อนไหว CSS3

เมื่อมีการสร้าง @keyframes ภาพเคลื่อนไหวผูกให้เลือกมิฉะนั้นการเคลื่อนไหวจะไม่มีผลกระทบ

ระบุอย่างน้อยสองคุณสมบัติ CSS3 ภาพเคลื่อนไหวถูกผูกไว้กับตัวเลือก A:

• มันระบุชื่อของภาพเคลื่อนไหว
• เมื่อนิเมชั่นความยาวที่กำหนดไว้

ตัวอย่าง

"การ myfirst" แอนิเมชั่ผูกติดอยู่กับองค์ประกอบ div ระยะเวลา: 5 วินาที:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

ลอง»

หมายเหตุ: คุณต้องกำหนดระยะเวลาของการเคลื่อนไหวและภาพเคลื่อนไหวชื่อถ้าคุณไม่ใช้ระยะเวลาของการเคลื่อนไหวจะไม่ทำงานเพราะค่าเริ่มต้นคือ 0

สิ่งที่ภาพเคลื่อนไหว CSS3 คืออะไร?

องค์ประกอบนิเมชั่นที่จะทำให้มีการเปลี่ยนแปลงอย่างค่อยเป็นค่อยไปจากรูปแบบหนึ่งที่มีผลรูปแบบอื่น

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

โดยใช้อัตราการเปลี่ยนแปลงในเวลาที่กำหนดหรือคำหลัก "จาก" และ "ถึง" คิดเป็น 0% และ 100%

0% เป็นจุดเริ่มต้นของภาพเคลื่อนไหว, ภาพเคลื่อนไหวเป็นเสร็จสมบูรณ์ 100%

สำหรับการสนับสนุนเบราว์เซอร์ที่ดีที่สุดที่คุณควรกำหนด 0% และ 100% ของตัวเลือก

ตัวอย่าง

เปลี่ยนสีพื้นหลังเมื่อนิเมชั่นเป็น 25% และ 50% และ 100% เสร็จสมบูรณ์เมื่อนิเมชั่นที่มีการเปลี่ยนแปลงอีกครั้ง:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

ลอง»

ตัวอย่าง

เปลี่ยนสีพื้นหลังและสถานที่ตั้ง:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

ลอง»

CSS3 คุณสมบัตินิเมชั่น

ตารางต่อไปนี้แสดงกฎ @keyframes นิเมชั่นและคุณสมบัติทั้งหมด:

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

ตัวอย่าง

เรียกใช้แอนิเมชั่ myfirst ตั้งคุณลักษณะทั้งหมด:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

ลอง»

ตัวอย่าง

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

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

ลอง»