ภาพเคลื่อนไหว CSS ที่เล็กที่สุด แอนิเมชั่นของอินเทอร์เฟซสำหรับความช่วยเหลือ CSS Animation css ใช้

เบราว์เซอร์ปัจจุบันทั้งหมด รวมถึง IE9 รองรับการเปลี่ยน CSS และแอนิเมชั่น CSS ซึ่งอนุญาตให้นำแอนิเมชั่นไปใช้ CSS, โดยไม่ต้องดึง JavaScript :ก่อนі :หลังจาก

รองรับเบราว์เซอร์

เช่น: 10.0
ไฟร์ฟอกซ์: 16.0, 5.0 -moz-
โครเมียม: 43.0, 4.0 -webkit-
ซาฟารี: 4.0 -webkit-
โอเปร่า: 12.1, 12.0 -o-
iOS ซาฟารี: 9, 7.1 -webkit-
โอเปร่ามินิ: -
เบราว์เซอร์ Android: 44, 4.1 -webkit-
Chrome สำหรับ Android: 44

เพื่อเพิ่มความเร็วให้กับแอนิเมชั่นในโปรเจ็กต์ของคุณ คุณพูดได้สองคำ:

1. สร้างแอนิเมชั่นของคุณเองเพื่อขอความช่วยเหลือ คำสำคัญ@คีย์เฟรม
2. เชื่อมต่อ її กับองค์ประกอบที่ต้องการให้เคลื่อนไหวได้ ซึ่งแสดงความต้องการพลังงาน

@กฎคีย์เฟรม

กฎ @คีย์เฟรมให้คุณสร้างแอนิเมชั่นเพื่อช่วยในช็อตสำคัญ - การตั้งค่าวัตถุในเวลาที่เหมาะสมของชั่วโมง

คีย์เฟรมของแอนิเมชั่นถูกสร้างขึ้นหลังความช่วยเหลือของคำสำคัญ จากі ถึง(เทียบเท่ากับค่า 0% และ 100%) หรือสำหรับคะแนนเปอร์เซ็นต์เพิ่มเติมซึ่งสามารถตั้งค่าได้ตลอดเวลา คุณยังสามารถรวมคำสำคัญและคะแนนเปอร์เซ็นต์

แม้ว่าจะไม่มีงาน cob ( จาก, 0%) หรือ ซินเซียม ( ถึง, 100%) เฟรม, เบราว์เซอร์เพื่อแทรกลงในค่าrozrahunkovіของหน่วยงานเคลื่อนไหวเช่นกลิ่นเหม็นของแอนิเมชั่น yakbi bula zastosovan

หากคีย์เฟรมสองรายการมีตัวเลือกที่เหมือนกัน ตัวส่งต่อจะบอกส่วนหน้า

ที่อนิเมชั่นที่กำหนด @คีย์เฟรมอาจติดตามพวกเขาด้วยแอนิเมชั่น (หากให้อิมยาอาจถูกกำหนดให้กับผู้มีอำนาจขององค์ประกอบแอนิเมชั่นซึ่งจะเป็นแอนิเมชั่น)

@keyframes ย้าย ( จาก ( แปลง: translateX(0px); ) 50% ( แปลง: translateX(130px); ) 100% ( แปลง: translateX(0px); ) )

เราสร้างแอนิเมชั่นโดยมีลักษณะดังนี้:

1. แอนิเมชั่นบนซัง ( จากคุณสามารถเขียน 0%) - ตำแหน่งขององค์ประกอบตามแกน X คือ 0px;
2. ตรงกลางของแอนิเมชั่น (50%) - ตำแหน่งขององค์ประกอบตามแนวแกน X คือ 130px;
3. แอนิเมชั่น Kіnets ( ถึงเราทำคะแนนได้ 100%) - เปิดองค์ประกอบบนซังของแอนิเมชั่น tobto ตำแหน่งขององค์ประกอบตามแกน X คือ 0px;

ที่นี่และเพิ่มเติมเพื่อความชัดเจน ฉันเขียน JavaScript สองสามแถวใกล้ก้น ซึ่งจะถูกเพิ่มตามความต้องการของคุณ หรือดูคลาสที่มีแอนิเมชันบนองค์ประกอบ ดังนั้นเพื่อสร้างแอนิเมชัน เพียงคลิกที่องค์ประกอบทั้งหมด

คีย์เฟรมสามารถจัดกลุ่มได้:

@keyframes ย้าย ( จาก ( แปลง: translateX(0px); ) 25%, 50% ( แปลง: translateX(130px); ) 100% ( แปลง: translateX(0px); ) )

แอนิเมชั่นหนึ่งองค์ประกอบสามารถกำหนดได้ไม่กี่แอนิเมชั่น ชื่อและพารามิเตอร์จะต้องเขียนตามที่ได้รับมอบหมาย:

องค์ประกอบ ( ชื่อแอนิเมชั่น: แอนิเมชั่น-1, แอนิเมชั่น-2; แอนิเมชั่น-ระยะเวลา: 2s, 4s; )

การเชื่อมต่อแอนิเมชั่นกับองค์ประกอบนั้นดำเนินการโดยสองทีม แอนิเมชั่น-ชื่อі แอนิเมชั่น-duration.

ชื่อแอนิเมชั่น

พลัง แอนิเมชั่น-ชื่อตั้งชื่อแอนิเมชั่น ขอแนะนำให้ชนะชื่อซึ่งสะท้อนถึงแก่นแท้ของแอนิเมชั่นซึ่งคุณสามารถชนะหนึ่งคำหรือปลาทะเลชนิดหนึ่งเพื่อช่วยตัวเองหรือสนับสนุนด้านล่าง _

ชื่อแอนิเมชั่น: ย้าย;

ฟังก์ชัน Timchas

พลัง แอนิเมชั่น-จับเวลา-ฟังก์ชั่นให้คุณติดตั้งฟังก์ชั่นพิเศษซึ่งรับผิดชอบความเร็วของแอนิเมชั่น เป็นสิ่งสำคัญที่ความเร็วของแอนิเมชั่นส่วนใหญ่ไม่เป็นเชิงเส้น กล่าวคือ її mitteva shvidkіstในนักธุรกิจที่แตกต่างกันได้รับการดูแล ปัจจุบันมีข้อโต้แย้งมากมายสำหรับกฎนี้: ผ่อนปรน, ความสะดวกใน, ผ่อนคลาย , เข้า-ออก สบาย, เชิงเส้น , เริ่มขั้นตอน , ขั้นปลาย.

อย่างไรก็ตาม คุณสามารถสร้างฟังก์ชันดังกล่าวได้ด้วยตัวเอง ฟังก์ชั่นพิเศษ ลูกบาศก์เบซิเยร์ (P1x, P1y, P2x, P2y); อาร์กิวเมนต์priymaє chotiri ที่จะอยู่ในїх osnovіv raspodіlu znachenie pri protsіanimatsії ฝึกฝนการทำงานของคุณเองและประหลาดใจกับกลิ่นเหม็นที่คุณสามารถทำงานบนเว็บไซต์นี้ได้

I, nareshti, แอนิเมชั่นสามารถแปลงเป็นชุดของค่าที่ไม่ต่อเนื่องสำหรับฟังก์ชั่นเพิ่มเติม ขั้นตอน(จำนวนkіlkіstkrokіvโดยตรง) เป็นข้อโต้แย้งว่ามีกี่kіlkіstїїkrokіvโดยตรงซึ่งสามารถให้ความหมาย เริ่มหรือ จบ .

• ผ่อนปรน- ฟังก์ชันสำหรับล็อค แอนิเมชั่นเริ่มต้นอย่างถูกต้อง แตกตัวอย่างรวดเร็ว และปลอมแปลงในภาพยนตร์ ตัวแปรคิวบิกเบซิเยร์ (0.25, 0.1, 0.25, 1)
• เชิงเส้น- แอนิเมชั่นเล่นอย่างสม่ำเสมอเป็นเวลาหนึ่งชั่วโมงโดยไม่ต้องกังวลเรื่องความเร็ว ตรงกับคิวบิกเบซิเยร์(0,0,1,1)
• ความสะดวกในแอนิเมชั่นเริ่มต้นอย่างถูกต้อง จากนั้นจึงเร่งความเร็วจนจบอย่างราบรื่น ตรงกับคิวบิกเบซิเยร์(0.42,0,1,1)
• ผ่อนคลาย- แอนิเมชั่นเริ่มต้นอย่างรวดเร็วและราบรื่น spoofilnyuєtsya naprikintsi; ตรงกับคิวบิกเบซิเยร์(0,0,0.58,1)
• เข้า-ออก สบาย- แอนิเมชั่นเริ่มต้นและสิ้นสุดอย่างถูกต้อง ตรงกับคิวบิกเบซิเยร์(0.42,0,0.58,1)
• ลูกบาศก์เบซิเยร์(x1, y1, x2, y2)- ดิวิ มากกว่า.
• สืบทอด- การลดลงของอำนาจในการเผชิญกับองค์ประกอบ Batkiv

การจับคู่ภาพ

แอนิเมชั่นจาก Zatrimka

พลัง แอนิเมชั่น-ล่าช้าตั้งค่าแอนิเมชั่นไว้ที่ด้านบนสุดของ cob เมื่อสร้างแอนิเมชั่น ตั้งค่าเป็นวินาทีหรือมิลลิวินาที zatrimka เชิงลบเริ่มแอนิเมชั่นตั้งแต่ช่วงแรกในช่วงกลางของวงจร tobto ในเวลาที่กำหนดโดยศัทธริมซี วิธีนี้ทำให้คุณสามารถตรึงแอนิเมชันได้ไม่เกินสองสามองค์ประกอบในเฟสที่ 3 โดยเปลี่ยนการดริฟท์น้อยกว่าหนึ่งชั่วโมง หากคุณต้องการให้แอนิเมชั่นเริ่มตรงกลาง ให้ตั้งค่าหน่วงเวลาติดลบ ซึ่งดีกว่าการตั้งค่าครึ่งชั่วโมงใน ระยะเวลาของแอนิเมชั่น. จิไม่ปฏิเสธ

องค์ประกอบ (ชื่อแอนิเมชั่น: แอนิเมชั่น-1; แอนิเมชั่น-ระยะเวลา: 2 วินาที; แอนิเมชั่น-ล่าช้า: 10 วินาที; // 10 วินาทีผ่านไปก่อนที่แอนิเมชั่นจะเริ่ม)

ทำซ้ำแอนิเมชั่น

พลัง แอนิเมชั่น-การวนซ้ำ-นับให้คุณเรียกใช้แอนิเมชั่นได้สองสามครั้ง จิไม่ปฏิเสธ วิธีตั้งค่าให้เป็นค่าบวก 1, 2, 3 … และอื่น ๆ. หรือ ไม่มีที่สิ้นสุดสำหรับการทำซ้ำไม่รู้จบ ค่า 0 มิฉะนั้นจะเป็นตัวเลขติดลบ ภาพเคลื่อนไหวจะเห็นจากการแกะสลัก

| 18.02.2016

CSS3 แสดงให้เห็นถึงความเป็นไปได้ของนักออกแบบ UI และข้อได้เปรียบหลักอยู่ที่ข้อเท็จจริงที่ว่ามันใช้งานได้จริงหรือไม่ว่าแนวคิดสามารถนำไปใช้ในชีวิตได้อย่างง่ายดายโดยไม่ต้องเข้าสู่ JavaScript

วิเศษมากที่คำง่ายๆ สามารถทำให้เว็บไซต์ที่ยอดเยี่ยมมีชีวิตชีวาขึ้นมาได้ ทำให้สามารถเข้าถึงผู้รับ koristuvachs ได้ ลองใช้ CSS3 เพื่อขอความช่วยเหลือ คุณสามารถอนุญาตให้องค์ประกอบแปลงและเปลี่ยนสไตล์ได้ ตัวอย่างเช่น เมื่อวางเมาส์เหนือ ตัวอย่างภาพเคลื่อนไหว CSS3 เก้าตัวอย่างซึ่งมีอยู่ด้านล่าง จะช่วยสร้างบรรยากาศของการเล่นโวหารบนไซต์ ตลอดจนปรับปรุงด้านที่ดูเป็นธรรมชาติของลมด้วยการเปลี่ยนภาพที่ราบรื่นสวยงาม

สำหรับข้อมูลโดยละเอียดเพิ่มเติม คุณสามารถดาวน์โหลดไฟล์เก็บถาวรจากไฟล์

Usі efekti pratsyuyut สำหรับการเปลี่ยนพลังงานเพิ่มเติม (eng. การเปลี่ยนแปลง- "transition", "transformation") และ pseudo-class: hover ซึ่งกำหนดรูปแบบขององค์ประกอบเมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือมัน (สำหรับผู้ช่วยของเรา) สำหรับแอปพลิเคชันของเรา เราได้เลือกบล็อก div ที่มีขนาด 500x309 พิกเซล สีพื้นหลังคือ #6d6d6d และการเปลี่ยนระหว่างอันหนึ่งกับอีกอันจะใช้เวลาไม่เกิน 0.3 วินาที

เนื้อหา > div (ความกว้าง: 500px; ความสูง: 309px; พื้นหลัง: #6d6d6d; -webkit-transition: ความง่าย 0.3s ทั้งหมด;; -moz-transition: ความง่าย 0.3s ทั้งหมด;; -o-transition: ความง่าย 0.3s ทั้งหมด; การเปลี่ยนแปลง : ทั้งหมด 0.3s ง่าย; )

1. เปลี่ยนสีของชั่วโมงโฮเวอร์

หากใช้เอฟเฟกต์ดังกล่าวจะทำกับสำเนาของหุ่นยนต์ที่มีการคำนวณทางคณิตศาสตร์ของค่า RGB เดียวกัน แค่เขียนก็พอ สไตล์ CSSในกรณีนี้จำเป็นต้องเพิ่ม pseudoclass:hover ไปที่ตัวเลือกและตั้งค่าสีพื้นหลัง ซึ่งจะเปลี่ยนสีพื้นหลังอย่างราบรื่น (ใน 0.3 วินาที) ด้วยตัวมันเองเมื่อเคอร์เซอร์วางเมาส์เหนือบล็อก:

สี:เลื่อน ( พื้นหลัง:#53ea93; )

2. ลักษณะของเฟรม

Cicava ที่ yaskrava แปลงเป็นเฟรมภายในที่ปรากฏขึ้นอย่างราบรื่นเมื่อวางเมาส์ไว้เหนือ Dobre pidide สำหรับตกแต่งปุ่มอื่นๆ เพื่อให้บรรลุผลนี้ เราใช้ pseudo-class: hover และพลังของ box-shadow ด้วยพารามิเตอร์ inset (กำหนดเงาตรงกลางขององค์ประกอบ) Krіm tsgogo จำเป็นต้องตั้งค่าส่วนขยายของเงา (สำหรับเราคือ 23px) และสีїїนั้น:

เส้นขอบ:โฮเวอร์ ( box-shadow: inset 0 0 0 23px #53ea93; )

3. สวิง

ดานา ภาพเคลื่อนไหว CSS- โทษที ความจริงที่ว่าพลังของการเปลี่ยนแปลงไม่ได้รับชัยชนะที่นี่ รองคนใหม่ mi zadіyali:

• @keyframes เป็นคำสั่งพื้นฐานสำหรับการสร้างแอนิเมชั่น CSS แบบเฟรมต่อเฟรมเพื่อเปิดใช้งานการทำงานของคีย์เฟรม rozkadruvannya และอธิบายภาพเคลื่อนไหวในรายการช่วงเวลาสำคัญ
• แอนิเมชั่นและแอนิเมชั่น-การวนซ้ำ-นับ - สิทธิ์ในการตั้งค่าพารามิเตอร์แอนิเมชั่น (จำนวนเล็กน้อยและความเร็ว) และจำนวนรอบ (ซ้ำ) บางครั้งทำซ้ำ 1

4. ข้อจำกัดความรับผิดชอบ

อันที่จริงแล้วผลกระทบของการซีดจางอย่างราบรื่นคือการเปลี่ยนแปลงตามปกติในความโปร่งใสขององค์ประกอบ แอนิเมชั่นถูกสร้างขึ้นในสองขั้นตอน: ที่ด้านหลังของศีรษะจำเป็นต้องตั้งค่าความโปร่งใสของ cob mill 1 - นี่คือความทึบแน่นอนหลังจากนั้นคุณต้องระบุค่าเมื่อวางเมาส์เหนือ - 0.6:

จาง ( ความทึบ: 1; ) .จาง:โฮเวอร์ ( ความทึบ: 0.6; )

สำหรับผลลัพธ์ที่ตรงกันข้าม จำค่าของเดือน:

5. การปรับปรุง

ดังนั้นเมื่อคุณวางเมาส์เหนือบล็อก บล็อกจะใหญ่ขึ้น เราเร่งพลังของการแปลงและตั้งค่าของสเกล(1.2) ด้วยเหตุนี้บล็อกจะเพิ่มขึ้น 20 vіdsotkіvและช่วยประหยัดสัดส่วน:

เติบโต: โฮเวอร์ ( -webkit-transform: มาตราส่วน (1.2); -ms-transform: มาตราส่วน (1.2); การแปลง: มาตราส่วน (1.2); )

6. เปลี่ยน

การเปลี่ยนองค์ประกอบทำได้ง่ายเพียงแค่เปลี่ยน แม้ว่าในย่อหน้าที่ห้า เพื่อเพิ่มขนาด เราจำเป็นต้องระบุค่าที่มากกว่า ต่ำกว่า 1 จากนั้นเพื่อเปลี่ยนบล็อก เราเพียงแค่ระบุค่า ราวกับว่ามีค่าน้อยกว่าหนึ่ง เช่น มาตราส่วน(0.7) . ตอนนี้ เมื่อวางเมาส์ บล็อกจะเปลี่ยนตามสัดส่วนเป็น 30 ตารางเมตรตามขนาดซัง:

หด:โฮเวอร์ ( -webkit-transform: มาตราส่วน (0.7); -ms-transform: มาตราส่วน (0.7); แปลง: มาตราส่วน (0.7); )

7. การแปลงโคโล่

แอนิเมชั่นที่มีชื่อเสียงที่สุดชิ้นหนึ่งคือองค์ประกอบที่เป็นเส้นตรง ซึ่งเมื่อวางเมาส์เหนือ จะแปลงร่างเป็นโคโล เพื่อขอความช่วยเหลือ พลังของ CSS border-radius, ชั่วร้ายเป็นคู่: โฮเวอร์และการเปลี่ยนแปลงสามารถดำเนินการได้โดยไม่มีปัญหา:

วงกลม:โฮเวอร์ ( border-radius: 70%; )

8. แรป

แอนิเมชั่นตลกขบขัน - การหมุนองค์ประกอบหนึ่งองศา ซึ่งเราต้องการพลังแห่งการเปลี่ยนแปลงอีกครั้ง แต่ถึงกระนั้นกับค่าอื่น - หมุนZ (20deg) สำหรับพารามิเตอร์ดังกล่าว บล็อกจะหมุนตามลูกศรปี 20 องศาตามแกน Z:

หมุน: โฮเวอร์ ( -webkit-transform: turnsZ(20deg); -ms-transform: rotationZ(20deg); transform: rotationZ(20deg); )

9. เฉดสี 3 มิติ

ความคิดของนักออกแบบแตกต่างกันออกไปว่าผลสุดท้ายของการออกแบบเรียบคืออะไร Tim ไม่น้อยไปกว่านั้น แอนิเมชั่น CSS3 นี้มีความแปลกใหม่และนำเสนอบนเว็บไซต์ด้วย การบรรลุผลเล็กน้อยจะได้รับความช่วยเหลือที่เรารู้อยู่แล้ว กล่องไฟ-เงา(สร้างเงาลูกที่สมบูรณ์) และแปลงด้วยพารามิเตอร์ translateX(-7px) (ให้บล็อกในแนวนอนไปทางซ้าย 7 พิกเซล):

threed:hover ( กล่องเงา: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6k -7px); แปลง: translateX(-7px);

รองรับเบราว์เซอร์

ในวันแห่งอำนาจนี้ เบราว์เซอร์ดังกล่าวรองรับการเปลี่ยนแปลง:

พลังอื่นๆ ชัยชนะในก้นเหล่านี้ เช่น การแปลงร่าง เงากล่อง ฯลฯ ล้วนได้รับการสนับสนุนจากทุกสิ่งเช่นกัน เบราว์เซอร์ที่ทันสมัย. อย่างไรก็ตาม หากคุณเลือกที่จะชนะแนวคิดเหล่านี้สำหรับโครงการของคุณ ขอแนะนำอย่างยิ่งให้ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ต่างๆ อีกครั้ง

หวังว่าอนิเมชั่น CSS3 เหล่านี้จะเหมาะกับคุณ ขอบคุณสำหรับความสำเร็จที่สร้างสรรค์!

แอนิเมชั่น CSS3ให้ไซต์ไดนามิก ได้รับรางวัลหน้าเว็บpozhvavlyuє, pokrashchuchi vzaєmodіyu z coristuvach นอกเหนือจากการเปลี่ยน CSS3 แล้ว การสร้างแอนิเมชันจะขึ้นอยู่กับคีย์เฟรม ซึ่งทำให้คุณสามารถเล่นเอฟเฟกต์ซ้ำและทำซ้ำได้โดยอัตโนมัติในชั่วโมงที่กำหนด รวมถึงการเริ่มแอนิเมชั่นในช่วงกลางของรอบ

แอนิเมชั่น CSS3 สามารถใช้ได้จริงกับองค์ประกอบ html ทั้งหมด เช่นเดียวกับองค์ประกอบหลอก: ก่อนและหลัง รายชื่ออนิเมชั่นของหน่วยงานอยู่ด้านข้าง เมื่อสร้างแอนิเมชั่นอย่าลืม ปัญหาที่เป็นไปได้ความสามารถในการผลิต เจ้าหน้าที่ oskіlki zmіnu dyakih ต้องการทรัพยากรจำนวนมาก

การแนะนำ CSS แอนิเมชั่น

รองรับเบราว์เซอร์

เช่น: 10.0
ไฟร์ฟอกซ์: 16.0, 5.0 -moz-
โครเมียม: 43.0, 4.0 -webkit-
ซาฟารี: 4.0 -webkit-
โอเปร่า: 12.1, 12.0 -o-
iOS ซาฟารี: 9, 7.1 -webkit-
โอเปร่ามินิ: —
เบราว์เซอร์ Android: 44, 4.1 -webkit-
Chrome สำหรับ Android: 44

1. คีย์เฟรม

คีย์เฟรมถูกเลือกเพื่อระบุความหมายของพลังของแอนิเมชั่น ณ จุดต่างๆ ของแอนิเมชั่น คีย์เฟรมกำหนดพฤติกรรมของแอนิเมชั่นหนึ่งรอบ แอนิเมชั่นสามารถทำซ้ำได้ตั้งแต่ศูนย์หรือหลายครั้ง

คีย์เฟรมมีการระบุตามกฎ @keyframes เนื่องจากมีการกำหนดลำดับต่อไปนี้:

@keyframes im'ya animatsii ( รายการกฎ )

การสร้างแอนิเมชั่นเริ่มต้นจากการติดตั้ง บุคลากรที่สำคัญ@กฎคีย์เฟรม เฟรมจะถูกกำหนดตามลักษณะที่สเตจจะเคลื่อนไหว โครงหนังสามารถมีหนึ่งบล็อกหรือมากกว่าของประกาศสำหรับพาวเวอร์คู่หนึ่งหรือหลายคู่และค่านั้น กฎ @keyframes คือการทำให้องค์ประกอบเคลื่อนไหว ราวกับว่ากฎถูกนำไปใช้กับบล็อกของแอนิเมชันขององค์ประกอบนั้น

@keyframes shadow ( from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) ถึง (text-shadow: 0 0 3px black;) )

คีย์เฟรมถูกสร้างขึ้นสำหรับคีย์เวิร์ดเพิ่มเติมจากและไปยัง (เทียบเท่า 0% และ 100%) หรือสำหรับคะแนนเปอร์เซ็นต์เพิ่มเติม ดังนั้นคุณจึงสามารถกำหนดส่วนลดได้ทุกปี คุณยังสามารถรวมคำสำคัญและคะแนนเปอร์เซ็นต์ แม้ว่าเฟรมจะเหมือนกันในพลังของความหมายนั้น แต่ก็สามารถรวมกันเป็นเสียงเดียวได้:

@keyframes ย้าย ( จาก, เป็น ( บนสุด: 0; ซ้าย: 0; ) 25%, 75% (บน: 100%;) 50% (บน: 50%;) )

หากไม่ได้ระบุเฟรม 0% หรือ 100% เบราว์เซอร์จะสร้างค่าอื่น (ในตอนเริ่มต้นของงาน) ของมูลค่าของพาวเวอร์แอนิเมชัน

กฎ @keyframes ส่วนใหญ่ถูกกำหนดให้กับพวกเขาเอง โดยจะยังคงอยู่ในลำดับของเอกสาร และทุกอย่างในอนาคตจะถูกละเว้น

เนื่องจากกฎ @keyframes ถูกละไว้ เราจึงสามารถใช้ภาพเคลื่อนไหวใหม่ได้:

H1 ( ขนาดตัวอักษร: 3.5em; สี: darkmagenta; แอนิเมชั่น: เงา 2s การเข้า - ออกที่ไม่มีที่สิ้นสุด; )

ไม่แนะนำให้เคลื่อนไหวค่าที่ไม่ใช่ตัวเลข (สำหรับข้อผิดพลาดเล็กน้อย) เนื่องจากผลลัพธ์ในเบราว์เซอร์อาจโอนไม่ได้ นอกจากนี้ อย่าสร้างคีย์เฟรมสำหรับค่าพลังงานโดยไม่เปลี่ยนจุดตรงกลาง เช่น สำหรับค่าพลังงาน color: pink และ color: #ffffff , width: auto และ width: 100px หรือ border-radius: 0 and border -radius: 50% (ฉันมี border-radius ที่ถูกต้อง: 0% สำหรับ viewpad ของฉัน)

1.1. ฟังก์ชันนาฬิกาบอกเวลาสำหรับคีย์เฟรม

กฎรูปแบบคีย์เฟรมยังสามารถแทนที่ฟังก์ชันตัวจับเวลาได้ เนื่องจากจำเป็นต้องปรับแต่งเพื่อย้ายภาพเคลื่อนไหวไปยังคีย์เฟรมถัดไป

ก้น

@keyframes ตีกลับ ( จาก ( บนสุด: 100px; animation-timing-function: ease-out; ) 25% ( บนสุด: 50px; animation-timing-function: ง่ายใน; ) 50% ( บนสุด: 100px; ฟังก์ชัน: ผ่อนปรน; ) 75% ( บนสุด: 75px; ฟังก์ชันเวลาแอนิเมชั่น: ผ่อนปรน; ) ถึง ( บนสุด: 100px; ) )

ห้าคีย์เฟรมที่ระบุไว้สำหรับภาพเคลื่อนไหวการตีกลับ ระหว่างคีย์เฟรมแรกและคีย์เฟรมอื่น (จากนั้นระหว่าง 0% ถึง 25%) ฟังก์ชันบูสต์จะชนะ ระหว่างคีย์เฟรมอื่นและคีย์เฟรมที่สาม (จากนั้นระหว่าง 25% ถึง 50%) ฟังก์ชันของการเร่งความเร็วที่ราบรื่นจะชนะ และจนถึงตอนนี้ องค์ประกอบจะเคลื่อนขึ้นเนินไปด้านข้าง 50px ดีขึ้นในโลกเมื่อถึงจุดสูงสุด จากนั้นช้าลงเมื่อลดลงเหลือ 100px อีกครึ่งหนึ่งของแอนิเมชั่นทำงานคล้ายกัน แต่ย้ายองค์ประกอบ 25px ขึ้นไปด้านข้างเท่านั้น

ฟังก์ชันนาฬิกาบอกเวลา ที่ระบุในคีย์เฟรมสูงสุดหรือ 100% จะถูกละเว้น

2. ชื่อแอนิเมชั่น: ชื่อแอนิเมชั่นผู้มีอำนาจ

พลังของชื่อแอนิเมชั่นกำหนดรายการแอนิเมชั่นที่ควรวางไว้ก่อนองค์ประกอบ สกิน im'ya vikoristovuetsya สำหรับการเลือกคีย์เฟรมในกฎที่เรารู้ความหมายของพลังของแอนิเมชั่น หากไม่ตรงกับคีย์เฟรมเดียวกันในกฎ ก็ไม่มีพลังของแอนิเมชัน จะไม่เคลื่อนไหวในระหว่างวัน

เนื่องจากแอนิเมชั่นจำนวนน้อยกำลังพยายามเปลี่ยนพลังนั้น แอนิเมชั่นจึงได้รับชัยชนะ ซึ่งใกล้จะถึงจุดสิ้นสุดของรายชื่อแล้ว

ภาพเคลื่อนไหวนี้คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ไม่อนุญาตให้ใช้คีย์เวิร์ด none ขอแนะนำให้อ้างอิงชื่อซึ่งสะท้อนถึงแก่นแท้ของแอนิเมชั่น ซึ่งในกรณีนี้ คุณสามารถอ้างอิงหนึ่งหรือสองสามคำ โดยย่อมาจากยัติภังค์หรือสัญลักษณ์ของคำบรรยายด้านล่าง _

พลังไม่เสื่อมคลาย

ไวยากรณ์

ภาพเคลื่อนไหว-ชื่อ: none; ชื่อแอนิเมชั่น: test-01; ชื่อแอนิเมชั่น: -sliding; ชื่อแอนิเมชั่น: เคลื่อนที่ในแนวตั้ง; ชื่อแอนิเมชั่น: test2; ชื่อแอนิเมชั่น: test3, move4; แอนิเมชั่น-ชื่อ: เริ่มต้น; ชื่อแอนิเมชั่น: สืบทอด;

3. Trivality of animation: พลังของแอนิเมชั่น-ระยะเวลา

พลังของแอนิเมชั่น-ระยะเวลากำหนดความถูกต้องของรอบแอนิเมชั่นหนึ่งรอบ ระบุเป็นวินาทีหรือมิลลิวินาทีมิลลิวินาที หากมีการตั้งค่าแอนิเมชั่นมากกว่าหนึ่งรายการสำหรับองค์ประกอบ คุณสามารถตั้งค่าชั่วโมงสกินที่แตกต่างกัน โดยจะแทนที่ค่าผ่านอาการโคม่า

พลังไม่เสื่อมคลาย

ไวยากรณ์

ภาพเคลื่อนไหว-ระยะเวลา: .5s; ภาพเคลื่อนไหว-duration: 200ms ภาพเคลื่อนไหว-duration: 2s, 10s ภาพเคลื่อนไหว-ระยะเวลา: 15s, 30s, 200ms

4. ฟังก์ชันจับเวลา: พลังของแอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน

พลังของแอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชันกำหนดวิธีที่แอนิเมชั่นพัฒนาระหว่างคู่สกินของคีย์เฟรม ภายใต้ชั่วโมงของ zatrimka ภาพเคลื่อนไหวของฟังก์ชัน timchas จะไม่ชนะ

พลังไม่เสื่อมคลาย

ไวยากรณ์

แอนิเมชั่น-จับเวลา-ฟังก์ชั่น: ง่าย; แอนิเมชั่น-เวลา-ฟังก์ชั่น: ความสะดวกใน; แอนิเมชั่น-เวลา-ฟังก์ชัน: ผ่อนปรน; แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน: ง่ายต่อการเข้า-ออก; แอนิเมชั่น-เวลา-ฟังก์ชั่น: เชิงเส้น; แอนิเมชั่น-จับเวลา-ฟังก์ชั่น: ขั้นตอนเริ่มต้น; แอนิเมชั่น-เวลา-ฟังก์ชัน: ขั้นตอนสิ้นสุด; แอนิเมชั่น-จับเวลา-ฟังก์ชั่น: คิวบิก-เบซิเยร์(0.1, 0.7, 1.0, 0.1); แอนิเมชั่นไทม์มิ่งฟังก์ชัน: ขั้นตอน (4, สิ้นสุด); แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน: ง่าย, สตาร์ท, คิวบิก-เบซิเยร์(0.1, 0.7, 1.0, 0.1); แอนิเมชั่น-จับเวลา-ฟังก์ชั่น: เริ่มต้น; แอนิเมชั่น-เวลา-ฟังก์ชัน: สืบทอด;

สำหรับแอนิเมชั่นหน้าปกเพิ่มเติม คุณสามารถสร้างเอฟเฟกต์แบบวนซ้ำได้ เช่น ข้อความหรือตัวบ่งชี้ที่สนใจ

5. การทำซ้ำของแอนิเมชั่น: พลังของแอนิเมชั่น-การวนซ้ำ-นับ

พลังของแอนิเมชั่น-การวนซ้ำ-นับแสดงจำนวนรอบของแอนิเมชั่นที่เล่น บนค่า cob 1 หมายความว่าแอนิเมชั่นจะดำเนินการบน cob จนกว่าจะสิ้นสุดหนึ่งครั้ง พลังนี้มักจะชนะค่าพลังงานทางเลือกของทิศทางของแอนิเมชั่น ราวกับว่าแอนิเมชั่นกลับด้านในลำดับที่กลับกันในวงจรสำรอง

พลังไม่เสื่อมคลาย

ไวยากรณ์

แอนิเมชั่น-วนซ้ำ-นับ:อนันต์; แอนิเมชั่น-วนซ้ำ-นับ: 3; แอนิเมชั่น-วนซ้ำ-นับ: 2.5; แอนิเมชั่น-วนซ้ำ-นับ: 2, 0, อนันต์;

6. แอนิเมชั่นโดยตรง: พลังของแอนิเมชั่น-ทิศทาง

อำนาจของทิศทางแอนิเมชั่นกำหนดว่าแอนิเมชั่นสามารถทำได้ตามลำดับหรือทุกรอบ หากภาพเคลื่อนไหวอยู่ในลำดับที่กลับกัน ฟังก์ชันเวลาจะเปลี่ยนไปตามเฟสด้วย ตัวอย่างเช่น เมื่อกำหนดในลำดับที่กลับกัน ฟังก์ชัน easy-in จะทำงานเหมือน easy-out

พลังไม่เสื่อมคลาย

เพื่อตรวจสอบว่า chi เป็นการทำซ้ำของวงจรของแอนิเมชั่นที่จับคู่หรือไม่จับคู่ - จำนวนการทำซ้ำเริ่มจาก 1

ไวยากรณ์

นิเมชั่น-ทิศทาง: ปกติ; แอนิเมชั่น-ทิศทาง: ย้อนกลับ; แอนิเมชั่น-ทิศทาง: ทางเลือก; แอนิเมชั่น-ทิศทาง: สลับ-ย้อนกลับ; แอนิเมชั่น-ทิศทาง: ปกติ, ย้อนกลับ; แอนิเมชั่น-ทิศทาง: สลับ, ย้อนกลับ, ปกติ; แอนิเมชั่น-ทิศทาง: เริ่มต้น; แอนิเมชั่น-ทิศทาง: สืบทอด;

7. การสร้างแอนิเมชั่น: พลังของแอนิเมชั่นเล่นสถานะ

พลังของแอนิเมชั่น-เล่น-สถานะกำหนดว่าแอนิเมชั่นจะเปิดตัวหรือหยุดชั่วคราว แอนิเมชั่น Zupinka ในช่วงกลางของวัฏจักรเป็นไปได้ผ่าน vikoristannya tsієї president สคริปต์จาวาสคริปต์. คุณยังสามารถเริ่มแอนิเมชั่นเมื่อวางเคอร์เซอร์เหนือวัตถุ - camp: hover

พลังไม่เสื่อมคลาย

ไวยากรณ์

แอนิเมชั่นเล่นสถานะ: วิ่ง; แอนิเมชั่นเล่นสถานะ: หยุดชั่วคราว; แอนิเมชั่นเล่นสถานะ: หยุดชั่วคราว, กำลังทำงาน, กำลังทำงาน; แอนิเมชั่นเล่นสถานะ: เริ่มต้น; แอนิเมชั่นเล่นสถานะ: สืบทอด;

8. แอนิเมชั่น zatrimka: พลังของแอนิเมชั่น-ดีเลย์

พลังของแอนิเมชั่น-ดีเลย์จะกำหนดว่าแอนิเมชั่นหยุดหรือไม่ ระบุเป็นวินาทีหรือมิลลิวินาทีมิลลิวินาที

พลังไม่เสื่อมคลาย

ไวยากรณ์

แอนิเมชั่น-ล่าช้า: 5s; ภาพเคลื่อนไหวล่าช้า: 3s, 10ms

9. ตั้งค่าองค์ประกอบก่อนที่จะสร้างแอนิเมชั่นถัดไป: power animation-fill-mode

พลังของโหมดเติมแอนิเมชั่นเป็นตัวกำหนดความสำคัญของการหยุดแอนิเมชั่นเป็นเวลาหนึ่งชั่วโมง เมื่อภาพเคลื่อนไหวสิ้นสุดลง องค์ประกอบจะหมุนเป็นสไตล์ดั้งเดิม สำหรับแอนิเมชั่น แอนิเมชั่นจะไม่เพิ่มความหมายของพาวเวอร์ ถ้าแอนิเมชั่นค้างอยู่ที่องค์ประกอบ - animation-name และ animation-delay นอกจากนี้ แอนิเมชั่นที่อยู่เบื้องหลังจิตใจไม่ได้เพิ่มความหมายของพลังหลังจากเสร็จสิ้น - animation-duration และ animation-iteration-count พลังของโหมดเติมภาพเคลื่อนไหวสามารถแทนที่พฤติกรรมนี้ได้

พลังไม่เสื่อมคลาย

ไวยากรณ์

แอนิเมชั่นเติมโหมด: ไม่มี; แอนิเมชั่นเติมโหมด: ส่งต่อ; แอนิเมชั่นเติมโหมด: ย้อนกลับ; แอนิเมชั่นเติมโหมด: ทั้งสอง; แอนิเมชั่นเติมโหมด: ไม่มี ย้อนกลับ; โหมดเติมแอนิเมชั่น: ทั้งสอง, ไปข้างหน้า, ไม่มี;

10. การบันทึกแอนิเมชั่นสั้น: พลังของแอนิเมชั่น

พารามิเตอร์ทั้งหมดของการสร้างแอนิเมชั่นสามารถรวมกันเป็นพลังเดียว - แอนิเมชั่น จัดเรียงใหม่ผ่านช่องว่าง:
แอนิเมชั่น: แอนิเมชั่น-ชื่อแอนิเมชั่น-ระยะเวลา แอนิเมชั่น-เวลา-ฟังก์ชั่น

สำหรับการสร้างแอนิเมชั่น ก็เพียงพอที่จะระบุพลังสองอย่างเท่านั้น - animation-name และ animation-duration การตัดสินใจของพลังที่จะยอมรับค่าของแอนิเมชั่น ลำดับของการแทนที่พลังงานไม่สำคัญ เพียงหนึ่งชั่วโมงของแอนิเมชั่น-ระยะเวลาของแอนิเมชันเท่านั้นที่สามารถอยู่ได้ก่อนการดีเลย์ของแอนิเมชัน-การหน่วงเวลาของแอนิเมชัน

11. แอนิเมชั่นหลายตัว

สำหรับองค์ประกอบหนึ่ง คุณสามารถตั้งค่าแอนิเมชั่นจำนวนหนึ่ง โดยเปลี่ยนชื่อผ่านใคร:

Div (แอนิเมชั่น: เงา 1 วินาที เข้าออกง่าย 0.5 วินาที สลับกัน ย้าย 5 วินาที เชิงเส้น 2 วินาที;)

ในการสร้างแอนิเมชั่น ให้ใช้พลังของการเปลี่ยนแปลง CSS และแอนิเมชั่น ลองดูพวกมันด้วยก้น

องค์ประกอบของแอนิเมชั่นไม่เพียงแต่ทำให้การออกแบบมีความวิจิตรงดงามเท่านั้น แต่ยังส่งเสียงร้องถึงอารมณ์เชิงบวก ราวกับว่าดึงดูดใจให้เข้ามาที่ไซต์อย่างแท้จริง

Tse scho ควรแสดงสัญญาณของ koristuvach

เท่าที่เกี่ยวข้องกับการพัฒนาเว็บ แอนิเมชั่นช่วยให้องค์ประกอบต่างๆ กับเนื้อหาด้วย CSS โดยไม่ต้องใช้ JavaScript ซึ่งดีสำหรับอุปกรณ์มือถือ

รู้สึกผิด ขั้นแรกให้ทำแอนิเมชั่นขององค์ประกอบ คุณต้องเรียนรู้พื้นฐานของ HTML และ CSS

องค์ประกอบหลักของแอนิเมชั่น CSS คือพลังของการเปลี่ยนภาพและแอนิเมชั่น และกฎ @keyframes

ลองดูที่พวกเขาตามลำดับ

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

พลังของทรานสิชั่นถูกกำหนดให้สร้างแอนิเมชั่นง่ายๆ ที่สร้างเอฟเฟกต์ของการเปลี่ยนสถานะระหว่างสองสถานะองค์ประกอบ

ทรานสิชั่นสามารถแบ่งออกเป็น 4 โกดัง ซึ่งสกินจะถูกเพิ่มเข้าไปในด้านเพลงของเอฟเฟกต์การเปลี่ยนแปลง

1. คุณสมบัติการเปลี่ยนแปลง - กำหนดพลังที่จะทำให้เคลื่อนไหว ตัวอย่างเช่น หากองค์ประกอบกำลังจะยุบ จากนั้นด้านบน ซ้าย ระยะขอบจะมีประสิทธิภาพ เปลี่ยนขนาด จากนั้นความกว้างหรือความสูง เปลี่ยนสี - สีหรือพื้นหลัง

สมัครสมาชิกแบบนี้:

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

2. ระยะเวลาการเปลี่ยนภาพ - ความไม่สำคัญของเอฟเฟกต์การเปลี่ยนแปลง ตั้งค่าเป็นวินาที

ระยะเวลาการเปลี่ยนภาพ : 3s;

3. Transition-timing-function - เอฟเฟกต์การเปลี่ยนแปลงที่ราบรื่น ใช้ความหมายต่อไปนี้:

ง่าย - แอนิเมชั่นเริ่มต้นอย่างถูกต้องจากนั้นก็จะเร่งและจนกว่าจะสงบลง

ความสะดวกใน - เพื่อเริ่มต้นอย่างถูกต้อง แต่รีบไปให้สุด

ผ่อนคลาย - ช้าลง แต่สงบลงจนจบ

ง่ายต่อการเข้า - ออก - เพิ่มในซังและในที่สุด

เชิงเส้น - ความเร็วคงที่;

ลูกบาศก์เบซิเยร์ - ตั้งค่าทั้งหมดสำหรับนิพจน์ตัวเลข ตัวอย่างเช่น ความง่ายเขียนเป็น ลูกบาศก์เบซิเยร์(0.25,0.1,0.25,1)

4. การเปลี่ยนภาพล่าช้า - แรเงาภาพเคลื่อนไหวบนซัง ตั้งค่าเป็นวินาที ตัวอย่างเช่น แอนิเมชั่นสามารถเริ่มตั้งแต่ เวลานัดหมายหลังจากพัวพันด้านข้าง.

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

การเปลี่ยนแปลง: เหลือ 3s สบายๆ(หรือ cubic-bezier(0.25,0.1,0.25,1) 3s;

ก้นที่องค์ประกอบถูกย้ายเมื่อวางเมาส์เหนือเคอร์เซอร์ใหม่

ผลลัพธ์:

แอนิเมชั่นและ @keyframes

พลังของแอนิเมชั่นและกฎของ @keyframes ชนะสำหรับการสร้างแอนิเมชั่น ไม่ว่าจะสอดคล้องกันแค่ไหน

พลังของแอนิเมชั่นตั้งค่าพารามิเตอร์แอนิเมชั่นสำหรับแอนิเมชั่น (ความไร้สาระของแอนิเมชั่น การซ้ำซ้อนโดยตรง ประเภทของรูหู croc) และในบล็อก @keyframes แอนิเมชั่นเองถูกกำหนดโดยโครเชต์ (เปลี่ยนรูปลักษณ์ของสิ่งนั้น ตำแหน่ง)

พลังของแอนิเมชั่นรวมถึงคลังสินค้าทั้งหมด:

1. ชื่อแอนิเมชั่น - ชื่อของแอนิเมชั่น ถามก็พอ หากคุณต้องการกำหนดแอนิเมชั่นในบล็อก @keyframes ชาร์ดขององค์ประกอบหนึ่งสามารถให้ชาร์ดของแอนิเมชันได้

2. ระยะเวลาของภาพเคลื่อนไหว - ระยะเวลาของภาพเคลื่อนไหว ตั้งค่าเป็นวินาที (s) หรือมิลลิวินาที (ms)

3. animation-timing-function - กำหนดประเภทของแอนิเมชั่นและยอมรับค่าต่อไปนี้:

ความสะดวก - การปลอม;

การเคลื่อนไหวเชิงเส้น - เท่ากัน

ผ่อนคลาย - ง่ายบนซัง;

ความสะดวกใน - เร่งความเร็วในที่สุด;

เข้า - ออกง่าย - ตีขึ้นรูปเรียบขึ้น, ลดความสะดวกลง

cubic-bezier - ตั้งค่าพารามิเตอร์ตัวเลขที่อนุญาตให้ใช้ประเภทแอนิเมชั่นพับ เครื่องมือสำหรับการเลือกพารามิเตอร์ตัวเลข - cubic-bezier.com

step-start และ step-end - ตั้งค่าแอนิเมชั่น pokroku (แอนิเมชั่น)

ขั้นตอน - กำหนดจำนวนช็อตซึ่งภาพเคลื่อนไหวจะเป็น vikonan (วินาที - ขั้นตอน (60) ภาพเคลื่อนไหว-ระยะเวลา -60 วินาที)

4. animation-iteration-count - กำหนดจำนวนการทำซ้ำของแอนิเมชั่น ยอมรับค่า:

ไม่ว่าจะเป็นตัวเลข - ภาพเคลื่อนไหวซ้ำกี่ครั้ง

อนันต์ - การทำซ้ำไม่รู้จบ;

5. แอนิเมชั่น-ทิศทาง - กำกับการเคลื่อนไหว ยอมรับค่า:

ปกติ - เลี้ยวขวา;

ย้อนกลับ - เลี้ยวขวา ซ้าย;

สลับกัน - วนซ้ำไปมา;

สลับกัน - ย้อนกลับ - วงจรใหม่ แต่มันเริ่มต้นและสิ้นสุดจากจุดสิ้นสุด

6. animation-play-state - ตั้งค่าเสียงแอนิเมชั่น ยอมรับค่า:

กำลังวิ่ง - แอนิเมชั่นทำงานตามปกติ (สำหรับค่าเริ่มต้น);

หยุดชั่วคราว - ภาพเคลื่อนไหวหยุดชั่วคราวเป็นครั้งแรก

7. animation-delay - ตั้งค่าการหน่วงเวลาของแอนิเมชั่นก่อนการเปิด cob แสดงเป็นวินาที (s) และมิลลิวินาที (ms)

8. โหมดเติมแอนิเมชั่น - ให้คุณเล่นแอนิเมชั่นของท่าในเวลาทำการที่ระบุ ยอมรับค่า:

ไม่มีเลย — แอนิเมชั่นใช้งานได้ในช่วงเวลาที่สร้างที่กำหนดเท่านั้น จากนั้นจึงเปลี่ยน

ส่งต่อ - แอนิเมชั่นจะดำเนินต่อไปหลังจากสิ้นสุดเวลาทำการ

ย้อนกลับ - แอนิเมชั่นเริ่มต้นที่จุดเริ่มต้นของการสร้าง

ทั้งสอง - แอนิเมชั่นทำงานจนถึงจุดเริ่มต้นและหลังสิ้นสุดชั่วโมง

Deyakі z tsikh ครอบงำที่หลังมืออาจเป็นเรื่องเหลวไหล แต่เมื่อรวมกับแอนิเมชั่นการพับ กลิ่นเหม็นช่วยให้คุณได้ตระหนักถึงวิธีแก้ปัญหาที่สร้างสรรค์ที่ตลก

พาวเวอร์ทั้งหมดสามารถเขียนได้อย่างรวดเร็ว โดยการแสดงแอนิเมชั่นในพาวเวอร์นั้นน้อยกว่าความหมาย ตัวอย่างเช่น:

กฎ @keyframes เป็นอีกหนึ่งการใช้งานสำหรับแอนิเมชั่นการพับแบบพับ

ตรงกลางของกฎนี้กำลังถูกสร้างขึ้นทีละขั้นตอน การสร้างการเปลี่ยนแปลงที่เกิดขึ้นกับองค์ประกอบ

อันที่จริงแล้ว ดูเหมือนว่านี้: ตัวเลือก @keyframes ถูกสร้างขึ้นในตารางสไตล์ ซึ่งอยู่ตรงกลางซึ่งตัวเลือกจะถูกวางและกำหนดสถานะขององค์ประกอบตามลำดับ

ตัวอย่างเช่น ลองใช้องค์ประกอบ

ดิฟ (
ความกว้าง: 200px
ความสูง: 200px;
สีพื้นหลัง: #FF3D00;
แอนิเมชั่น: nev 5s ทางเลือกอนันต์;

@keyframes nev (
จาก ( /* ดู */
ความทึบ: 0 /* โปร่งใสอย่างสมบูรณ์ */
}
ถึง ( /* ก่อน */
ความทึบ: 1 /* ทึบแสงอย่างสมบูรณ์ */
}
}

ตัวเลือกจากและเพื่อตั้งค่าการแปลงจากองค์ประกอบหนึ่งไปอีกองค์ประกอบหนึ่ง

ดีกว่าที่จะเปลี่ยนที่vіdsotkah สามารถเพิ่มจำนวนตัวเลือกเท่าเดิม และในขณะเดียวกันก็แบ่งกระบวนการออกเป็นขั้นตอนต่างๆ มากขึ้น

สำหรับสเตจผิวก็ใส่เองได้ ตัวอย่างเช่น trivality, cordon, rozmir toshcho

@keyframes nev (
0% {
ความทึบ: 0
รัศมีขอบ: 50%
}

50% {
ความทึบ: 0.5
รัศมีชายแดน: 30%
}

100% {
ความทึบ: 1
รัศมีเส้นขอบ : 0;
}
}

ตัวอย่างลักษณะที่ปรากฏของเครื่องหมายสี่เหลี่ยมนั้น:

ผลลัพธ์:

ฉันมั่นใจว่าเข้าใจพื้นฐานของการสร้างแอนิเมชั่นแล้ว ตอนนี้ ถ้าคุณอยู่ในอำนาจ ความหมายของเครื่องมือนั้น ให้ใช้ Notepad ++ และทำงานจากง่ายไปจนถึงพับ

บทความถัดไป "การจัดตำแหน่ง CSS, Wrap, 3D" แสดงให้เห็นอย่างชัดเจนถึงพลังของการแปลงร่าง ซึ่งมักจะติดอยู่กับแอนิเมชัน

แอนิเมชั่น CSS3 ได้รับการสนับสนุนอย่างกว้างขวาง ได้เวลาเริ่มพูดถึงวิธีสร้างภาพเคลื่อนไหว CSS สำหรับผู้สร้างเว็บไซต์แล้ว คุณอาจคิดว่าแอนิเมชั่น CSS3 มีหน้าที่ทำให้บล็อกยุบและดูเหมือนการ์ตูน แอนิเมชั่น Ale CSS - ไม่เพียงแต่ย้ายองค์ประกอบจากจุดหนึ่งไปยังอีกจุดหนึ่ง แต่ยังสร้างการแปลงอื่นๆ ด้วย Sob tse bulo ozumіlo navit สำหรับpochatkіvtsіvฉันวาดหนวดบนโครเชต์

1. พลังพื้นฐานของแอนิเมชั่น CSS3

ตามที่คุณเข้าใจบล็อกทางทฤษฎีขนาดเล็กว่า CSS3 มีประสิทธิภาพเพียงใดสำหรับแอนิเมชั่นและความหมายของกลิ่นเหม็นสามารถเรียกได้อย่างไร

• แอนิเมชั่น-ชื่อ- แอนิเมชั่นที่ไม่ซ้ำใคร (ภาพหลัก เราจะพูดถึงพวกเขาด้านล่าง)
• ระยะเวลาของแอนิเมชั่น- เรื่องไม่สำคัญของแอนิเมชั่นในไม่กี่วินาที
• แอนิเมชั่น-จับเวลา-ฟังก์ชั่น- เส้นโค้งสำหรับเปลี่ยนความเร็วของแอนิเมชั่น มองแวบแรกก็ไม่มีความหมาย ไปข้างหน้าง่ายกว่าที่จะแสดงบนก้นและ їх vie ต่ำกว่า คุณสามารถใช้ค่าเหล่านี้: เชิงเส้น | สบาย | สะดวกสบาย | ผ่อนคลาย | ลูกบาศก์เบซิเยร์(n,n,n,n).
• แอนิเมชั่น-ล่าช้า- ชัตเตอร์ในไม่กี่วินาทีก่อนอนิเมชั่น cob
• แอนิเมชั่น-การวนซ้ำ-นับ- จำนวนการทำซ้ำของแอนิเมชั่น สามารถตั้งค่าได้ง่ายๆ ด้วยตัวเลข หรือคุณสามารถระบุอนันต์และสามารถนับภาพเคลื่อนไหวได้ไม่จำกัด

ที่นี่คุณต้องการพลังพื้นฐานมากขึ้น ซึ่งเพียงพอหรือมากหรือน้อยเพื่อสร้างแอนิเมชั่นแรกบน CSS3

ยังคง เราต้องรู้ว่าความเข้าใจในทฤษฎีนั้น - สิ่งเหล่านี้ วิธีสร้างช็อตสำคัญ นอกจากนี้ยังง่ายต่อการทำงานโดยใช้กฎ @keyframes ซึ่งอยู่ตรงกลางซึ่งมีการระบุคีย์เฟรม ไวยากรณ์ของกฎแห่งความก้าวหน้านี้:

เราได้ตั้งค่าเฟรมแรกและเฟรมสุดท้าย Usіpromiznіกลายเป็น razrahuyutsya โดยอัตโนมัติ!

2. ตัวอย่างอนิเมชั่น CSS3 ในชีวิตจริง

ทฤษฎีนี้น่าเบื่อเหมือนเดิมและตามความเป็นจริง การทำงานทุกอย่างในแอปพลิเคชันจริงจะง่ายกว่า และควรใช้มือของคุณเองในด้าน HTML ทดสอบ

เมื่อคุณเรียนรู้ภาษาของโปรแกรมแล้ว ให้เขียนโปรแกรม "สวัสดี ชาวโลก!" Ale mi vchaєmoไม่ใช่การเขียนโปรแกรม mov แต่เป็นคำอธิบาย mov มองอย่างมีสติเอกสาร. นั่นเป็นเหตุผลที่เราพูดว่า "สวัสดีชาวโลก!"

Axis sho mi zrobimo สำหรับ ก้น:มาสร้างบล็อคกันเถอะ