ហើយនោះហើយជាវា! តោះមើលថាតើវាមើលទៅដូចអ្វីនៅក្នុងការពិត។

ដំបូង ការសម្គាល់ HTML. វាសាមញ្ញណាស់ ពីព្រោះយើងធ្វើការតែជាមួយធាតុមួយក្នុងមួយទំព័រប៉ុណ្ណោះ។

1	<div class = "toSmallWidth" >

ហើយនេះគឺជាអ្វីដែលនៅក្នុងឯកសាររចនាប័ទ្ម៖

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (រឹម : 20px auto ; /* រឹមខាងក្រៅនៅផ្នែកខាងលើ និងខាងក្រោមនៃ 20px និងការតម្រឹមនៅកណ្តាល*/ផ្ទៃខាងក្រោយ: ក្រហម; // ផ្ទៃខាងក្រោយក្រហមនៃប្លុក*/កម្ពស់: 100px; /* កម្ពស់ប្លុក 100px*/ទទឹង៖ ៨០០ ភីច; /* ទទឹងដំបូង 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animation-រយៈពេល : 5s; /* ទ្រព្យសម្បត្តិដែលមានបុព្វបទសម្រាប់កម្មវិធីរុករក Chrome, Safari, Opera */ ឈ្មោះចលនា៖ animWidthSitehere;/* ចង្អុលបង្ហាញឈ្មោះរបស់ស៊ុមគន្លឹះ (មានទីតាំងនៅខាងក្រោម)*/ ចលនា - រយៈពេល៖ 5s; } /* កំណត់រយៈពេលនៃចលនា*/ /* keyframes ដែលមានបុព្វបទសម្រាប់ Chrome, Safari, Opera browsers */@-webkit-keyframes animWidthSitehere ( ពី (ទទឹង: 800px;) ទៅ (ទទឹង: 100px;))@keyframes animWidthSitehere ( ពី (ទទឹង: 800px;) /* ដំបូងស៊ុមគន្លឹះដែលទទឹងប្លុកគឺ 800px*/ /* ស៊ុមគន្លឹះចុងក្រោយ ដែលទទឹងប្លុកគឺ 100px*/ }

ដូចដែលអ្នកអាចមើលឃើញ យើងបានបញ្ជាក់តែស៊ុមគន្លឹះដំបូង និងចុងក្រោយប៉ុណ្ណោះ ហើយគ្រាប់ចុចកម្រិតមធ្យមទាំងអស់ត្រូវបាន "សាងសង់" ដោយស្វ័យប្រវត្តិ។

គំនូរជីវចល CSS3 ដំបូងរបស់អ្នករួចរាល់ហើយ។ ដើម្បីបង្រួបបង្រួមចំណេះដឹងដែលទទួលបាន សូមបង្កើត ឯកសារ HTMLនិង ឯកសារ CSSហើយបញ្ចូលនៅទីនោះ (ក ប្រសើរជាងដោយដៃរបស់អ្នក។បោះពុម្ព) កូដពីឧទាហរណ៍។ បន្ទាប់មកអ្នកប្រាកដជាយល់គ្រប់យ៉ាង។ បន្ទាប់មកព្យាយាមដូចគ្នាជាមួយនឹងកម្ពស់នៃប្លុក (វាគួរតែថយចុះនៅក្នុងកម្ពស់) ដើម្បីធានាសម្ភារៈ។

3. ឧទាហរណ៍ចលនា CSS3 ស្មុគស្មាញបន្ថែមទៀត

ខាងលើអ្នកបានរៀនពីរបៀបបង្កើតចលនា CSS3 យ៉ាងងាយស្រួល។ ប្រសិនបើអ្នកព្យាយាមធ្វើវាដោយដៃរបស់អ្នកផ្ទាល់ នោះអ្នកយល់ពីដំណើរការទាំងមូលរួចហើយ ហើយឥឡូវនេះអ្នកចង់ស្វែងយល់ពីរបៀបដែលអ្នកអាចបង្កើតភាពស្មុគស្មាញ និង ចលនាដ៏ស្រស់ស្អាត. ហើយវាពិតជាអាចធ្វើទៅបានដើម្បីបង្កើតវា។ ខាងក្រោមនេះមានមេរៀនចំនួន 3 ដែលគំនូរជីវចលត្រូវបានបង្កើតតាមរបៀបដូចក្នុងឧទាហរណ៍ខាងលើ។

មេរៀន CSS គំនូរជីវចល 3 (ការផ្លាស់ប្តូរ)

មេរៀននឹងជួយអ្នកឱ្យយល់អំពីចលនា CSS បន្ថែមទៀតកាន់តែប្រសើរ។ រឿងចំបងគឺព្យាយាមនិយាយឡើងវិញនូវអ្វីដែលអ្នកឃើញនៅក្នុងមេរៀន។ ឬយ៉ាងហោចណាស់ព្យាយាមផ្លាស់ប្តូរតម្លៃទ្រព្យសម្បត្តិហើយមើលថាតើមានអ្វីកើតឡើងបន្ទាប់មកអ្នកនឹងកាន់តែភ័យខ្លាច CSS ។

យកចិត្តទុកដាក់! ដោយសារនៅក្នុងមេរៀននេះ យើងនឹងវិភាគគំនូរជីវចល ខ្ញុំនឹងមិនអាចបង្ហាញអ្នកពីឧទាហរណ៍នៃការងាររបស់វានៅក្នុងរូបភាពបានទេ ដូច្នេះមានអារម្មណ៍សេរីក្នុងការបើកកម្មវិធីនិពន្ធកូដ ហើយសរសេរកូដដែលបានផ្តល់ឱ្យនៅក្នុងអត្ថបទនេះនៅទីនោះ។

មូលដ្ឋានគ្រឹះនៃការបង្កើត

ដូច្នេះដំបូងអ្នកត្រូវចាប់ផ្តើមជាមួយរបៀបបង្កើតវា។ អ្នក​ប្រហែល​ជា​ធ្លាប់​ដឹង​ថា​អ្វី​មួយ​នៅ​ក្នុង CSS ត្រូវ​បាន​អនុវត្ត​ដោយ​កំណត់​លក្ខណៈ​សម្បត្តិ​ចាំបាច់​ជាមួយ​នឹង​តម្លៃ​ដែល​ត្រូវ​គ្នា​ទៅ​នឹង​ជម្រើស​ដែល​ចង់​បាន។ ដូច្នេះ​ពេល​បង្កើត​ចលនា នេះ​មិន​គ្រប់គ្រាន់​ទេ។ ដ្យាក្រាមមើលទៅដូចនេះ៖

ផលប៉ះពាល់នៃការផ្លាស់ប្តូរខ្លួនឯងត្រូវបានបង្កើតដោយប្រើ @keyframes

ធាតុដែលត្រូវការត្រូវបានផ្តល់ចលនាដូចគ្នានេះ ក៏ដូចជាប៉ារ៉ាម៉ែត្ររបស់វា (ទាំងអស់នេះដោយប្រើលក្ខណៈសម្បត្តិ និងតម្លៃរបស់វា)។

ដូច្នេះដំបូងយើងត្រូវពណ៌នា ការផ្លាស់ប្តូរចាំបាច់នៅក្នុង @keyframes សូមពិនិត្យមើលឱ្យកាន់តែច្បាស់អំពីរបៀបធ្វើការជាមួយពួកគេ។

@keyframes វាក្យសម្ព័ន្ធ

តាមពិតទៅ វានឹងកាន់តែងាយស្រួលសម្រាប់ខ្ញុំក្នុងការពន្យល់គ្រប់យ៉ាងដល់អ្នកនៅក្នុងនោះ។ ឧទាហរណ៍ដែលបានបញ្ចប់ទោះបីជាវាសាមញ្ញណាស់។ វានៅទីនេះ (កូដត្រូវបានបន្ថែមទៅឯកសារ css)៖

@keyframes pulse(0%(font-size: 50px;) 50%(font-size: 60px;)) 100%(font-size: 50px;))

@keyframes pulse ( 0% (ទំហំពុម្ពអក្សរ៖ 50px;) 50% (ទំហំពុម្ពអក្សរ៖ 60px;))

ដូច្នេះបន្ទាប់ពីពាក្យគន្លឹះ @keyframes មានពាក្យបំពានដែលនឹងដើរតួជាឈ្មោះរបស់ចលនា។ ក្នុងករណីរបស់យើងវាគឺជា "ជីពចរ" ។ បើកបន្ទាប់ ដង្កៀបដែលពួកគេសរសេរ ច្បាប់ចាំបាច់.

ភាគរយ​គឺ​ជា​អ្វី​ដែល​ហៅ​ថា​ត្រា​ពេល​ដែល​លក្ខណៈ​សម្បត្តិ​ដែល​បាន​បញ្ជាក់​នឹង​ត្រូវ​បាន​បន្ថែម​ទៅ​ធាតុ។ ក្នុងករណីរបស់យើងអ្វីដែលត្រូវបានសរសេរមានន័យដូចខាងក្រោម: នៅដើមដំបូងនៃការអនុវត្តទំហំពុម្ពអក្សរនឹងមាន 50 ភីកសែលនៅកណ្តាលវានឹងកើនឡើងដល់ 60 ហើយនៅចុងបញ្ចប់វានឹងថយចុះម្តងទៀតទៅទំហំដំបូង។

ពាក្យគន្លឹះពី និងទៅ អាចជំនួសសញ្ញាភាគរយ ពួកវាបង្ហាញពី 0% និង 100% រៀងគ្នា ពោលគឺការចាប់ផ្តើម និងបញ្ចប់នៃការចាក់សារថ្មី។

ការដាក់ចលនាទៅជាសកម្មភាព

សម្រាប់ពេលនេះ យើងទើបតែមានកូដដែលបង្កើតបែបផែនចលនា ប៉ុន្តែវាមិនត្រូវបានប្រើនៅកន្លែងណានោះទេ។ ប្រសិនបើអ្នកធ្វើឱ្យទំព័របណ្ដាញរបស់អ្នកឡើងវិញ គ្មានអ្វីនឹងផ្លាស់ប្តូរទេ។ ដូច្នោះហើយ ដើម្បីអនុវត្តចលនា អ្នកត្រូវអនុវត្តពីរជំហាន៖

ជ្រើសរើសធាតុដែលវានឹងត្រូវបានអនុវត្ត

ភ្ជាប់វាទៅនឹងច្បាប់ដែលបានពិពណ៌នាតាមរយៈ @keyframes (តាមឈ្មោះ) និងកំណត់ផងដែរ។ ការកំណត់បន្ថែមបើចាំបាច់។

តោះសាកល្បង

នៅក្នុងឯកសារ html របស់ខ្ញុំ ខ្ញុំបានបង្កើតប្លុកមួយដែលមានថ្នាក់ស្រមោល ដែលមាន ខ្សែអក្សរសាមញ្ញអត្ថបទ។ គោលដៅរបស់យើងគឺអនុវត្ត ផលប៉ះពាល់ចលនាដែលបានពិពណ៌នាដោយពួកយើងពីមុនមកនេះ។ ធាតុអត្ថបទ.

មានលក្ខណៈសម្បត្តិចាំបាច់ចំនួនពីរដែលចាំបាច់ត្រូវបញ្ជាក់ក្នុងករណីនេះដើម្បីឱ្យអ្វីៗដំណើរការបាន។ ទីមួយ នេះគឺជាឈ្មោះដែលយើងបានសរសេរនៅក្នុង keyframes ។ ទីពីរ នេះគឺជារយៈពេលនៃចលនា ពីព្រោះបើគ្មានប៉ារ៉ាម៉ែត្រនេះ កម្មវិធីរុករកនឹងមិនអាចលេងវាបានទេ។

ដូច្នេះ បន្ថែមពីលើរចនាប័ទ្មដែលប្លុករបស់យើងមានរួចហើយ យើងបន្ថែមរចនាប័ទ្មថ្មី៖

ឈ្មោះចលនា៖ ជីពចរ; រយៈពេលចលនា៖ 2s;

ដូច្នេះអ្វីៗនឹងត្រូវធ្វើម្តងទៀត 4 ដងហើយបន្ទាប់មកឈប់។ ដូចដែលអ្នកយល់ ជំនួសឱ្យលេខបួន អ្នកអាចបញ្ចូលលេខណាមួយ។

ចលនាគ្មានទីបញ្ចប់នៅក្នុង css3

អនុវត្តយ៉ាងងាយស្រួលដោយប្រើទ្រព្យសម្បត្តិដូចគ្នា។ តាមពិតទៅ អ្នកគ្រាន់តែអាចកំណត់ចំនួនពាក្យដដែលៗជាពីរពាន់ វានឹងគ្រប់គ្រាន់ ប៉ុន្តែតាមទ្រឹស្តី ចលនារបស់យើងនឹងមិនកើតឡើងដដែលៗដោយគ្មានកំណត់នោះទេ។

animation-iteration-count : infinite;

ចលនា - ការធ្វើឡើងវិញ - រាប់៖ គ្មានកំណត់ ;

នោះហើយជាវា ឥឡូវនេះយើងបានធ្វើម្តងទៀតគ្មានទីបញ្ចប់។ ខ្ញុំមិនណែនាំឱ្យពិនិត្យមើលថាតើនេះជាការពិតទេ បន្ទាប់ពីអង្គុយនៅពីក្រោយម៉ូនីទ័រពេញមួយជីវិតរបស់អ្នក។ វា​ត្រូវ​បាន​ប្រើ​យ៉ាង​សាមញ្ញ​ក្នុង​ករណី​ដែល​អ្នក​ចង់​ឱ្យ​មាន​ឥទ្ធិពល​ដដែលៗ ហើយ​មិន​បាត់។ ប្រសិនបើវាមិនរំខាន និងមិនរំខានអ្នកប្រើប្រាស់ នោះហេតុអ្វីមិនធ្វើ។

ពន្យារពេលមុនពេលចាប់ផ្តើម

តាមលំនាំដើម ការចាក់សារថ្មីចាប់ផ្តើមបន្ទាប់ពី ផ្ទុកពេញទំព័រ។ ឥរិយាបថនេះអាចត្រូវបានគ្រប់គ្រងដោយប្រើលក្ខណៈសម្បត្តិពន្យាពេលចលនា។ តម្លៃរបស់វាត្រូវបានបញ្ជាក់ជាវិនាទី។

ទិសដៅ

ទ្រព្យសម្បត្តិគួរឱ្យចាប់អារម្មណ៍មួយទៀតគឺចលនា - ទិសដៅ។ តាមលំនាំដើម វាត្រូវបានកំណត់ទៅធម្មតា ប្រសិនបើអ្នកកំណត់វាទៅបញ្ច្រាស នោះស៊ុមដែលបានពិពណ៌នាទាំងអស់នឹងត្រូវបានប្រតិបត្តិក្នុង ទិសដៅបញ្ច្រាស. ចូរយើងពិនិត្យមើលថាតើអ្វីជាភាពខុសគ្នា។ ដើម្បីធ្វើដូច្នេះខ្ញុំបានផ្លាស់ប្តូរបែបផែនបន្តិចដោយបន្ថែមស៊ុមផ្សេងទៀត។

@keyframes pulse(0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

@keyframes pulse ( 0% (ទំហំពុម្ពអក្សរ៖ 50px;) 50% (ទំហំពុម្ពអក្សរ៖ 60px;) 70% (ទំហំពុម្ពអក្សរ៖ 80px;) 100% (ទំហំពុម្ពអក្សរ៖ 50px;))

ដូច្នេះ ជាមួយនឹងទិសដៅធម្មតានៅក្នុងពាក់កណ្តាលដំបូងនៃចលនា ទំហំពុម្ពអក្សរនឹងកើនឡើងដល់ 60 ភីកសែល បន្ទាប់មកវានឹងកើនឡើងយ៉ាងខ្លាំងម្តងទៀតដល់ 80 បន្ទាប់ពីនោះវានឹងត្រលប់ទៅ ទីតាំងចាប់ផ្តើម.

អង្ករ។ ២. ទំហំដើមអត្ថបទ

អង្ករ។ 3. ទំហំពុម្ពអក្សរគឺស្ទើរតែនៅចុងបញ្ចប់នៃចលនា មុនពេលត្រឡប់ទៅសភាពដើមវិញភ្លាមៗ។

ឥឡូវនេះយើងសួរថា:

ចលនា - ទិសដៅ: បញ្ច្រាស;

ចលនា - ទិសដៅ៖ បញ្ច្រាស;

អ្វីគ្រប់យ៉ាងប្រែទៅជាបញ្ច្រាស។ ដំបូង អត្ថបទនឹងកើនឡើងដល់ទៅ 30 ភីកសែល រហូតដល់ 80 ហើយសម្រាប់ចលនាដែលនៅសល់ វានឹងថយចុះបន្តិចម្តងៗ ទីបំផុតត្រឡប់ទៅទំហំពីមុនរបស់វាវិញ។ វាសាមញ្ញ។

ទម្រង់ចលនា

ហើយនេះប្រហែលជាមួយក្នុងចំណោមភាគច្រើនបំផុត។ ការកំណត់គួរឱ្យចាប់អារម្មណ៍នៅក្នុងការពិសោធន៍ដែលអ្នកអាចអនុវត្តបាន។ សម្រាប់រយៈពេលដ៏យូរមួយ។. តាមលំនាំដើម ការផ្លាស់ប្តូរទាំងអស់ត្រូវបានអនុវត្តក្នុងល្បឿនដូចគ្នា។ ប្រភេទនៃចលនានេះត្រូវបានគេហៅថាលីនេអ៊ែរ ហើយមានផ្សេងទៀតក្រៅពីវា។

មុនពេលការមកដល់នៃ CSS3 ពាក្យ "ចលនា" បានធ្វើឱ្យអ្នកសរសេរកូដបែកញើសត្រជាក់។ ហើយទាំងអស់ដោយសារតែនៅសម័យនោះ វាមិនអាចទៅរួចទេក្នុងការបង្កើតគំនូរជីវចលដែលមានគុណភាពខ្ពស់ និងស្រស់ស្អាត កិច្ចការតូចតាច. CSS មិន​អាច​ធ្វើ​ដូច្នេះ​បាន​ទេ ដូច្នេះ​ចលនា​ទាំងអស់​ត្រូវ​បាន​ធ្វើ​នៅ​ក្នុង JavaScript។ វាចាំបាច់ក្នុងការរុះរើវេទិកាជាច្រើន ស្វែងរកសមមិត្តដូចគ្នានៅក្នុងសំណាងអាក្រក់ ចំណាយពេលច្រើនលើការអភិវឌ្ឍន៍ ហើយនៅទីបញ្ចប់បានឮពីអ្នករចនាថា "មិនអីទេ នេះនឹងធ្វើ" ។ ហើយនៅពេលដែល CSS3 ចេញមកចុងក្រោយ កាំជ្រួចមិនឈប់រហូតដល់ព្រឹក ហើយស្រាសំប៉ាញក៏ហូរដូចទឹកទន្លេ។ វា​ជា​ថ្ងៃ​ដ៏​អស្ចារ្យ​សម្រាប់​អ្នក​បង្កើត​គេហទំព័រ​ទាំង​អស់ (ថ្ងៃ​បន្ទាប់​គឺ​ជា​ពេល​ដែល Microsoft បាន​ប្រកាស​ការ​បញ្ចប់​ការ​គាំទ្រ Internet Explorer) ជាមួយនឹងការមកដល់នៃ CSS3 កិច្ចការស្មុគស្មាញជាច្រើនពីមុនបានក្លាយទៅជាសាមញ្ញ និងរីករាយក្នុងការធ្វើការជាមួយ។ ដូចគ្នានេះដែរអនុវត្តចំពោះចលនានៅក្នុង CSS ដែលខ្ញុំនឹងនិយាយអំពីនៅក្នុងអត្ថបទនេះ។

ការផ្លាស់ប្តូរ CSS

ការផ្លាស់ប្តូរ CSS អនុញ្ញាតឱ្យអ្នកធ្វើការផ្លាស់ប្តូរទៅលើលក្ខណៈសម្បត្តិ CSS យ៉ាងរលូន និងតាមពេលវេលា។ វិធីនេះ អ្នកទទួលបានឱកាសដើម្បីគ្រប់គ្រងដំណើរការនៃការផ្លាស់ប្តូររបស់ធាតុមួយពីរដ្ឋមួយទៅរដ្ឋមួយទៀត។ ចូរចាប់ផ្តើមជាមួយនឹងឧទាហរណ៍ដ៏សាមញ្ញមួយ ហើយបន្តទៅមុខទៀត។

នៅពេលអ្នកដាក់ទស្សន៍ទ្រនិចលើការ៉េ ពណ៌ផ្ទៃខាងក្រោយនឹងផ្លាស់ប្តូរយ៉ាងរលូន។

ឥឡូវនេះ សូមពិនិត្យមើលឱ្យកាន់តែច្បាស់អំពីរបៀបគ្រប់គ្រងការផ្លាស់ប្តូរនៅក្នុង CSS ។ យើងមានលក្ខណៈសម្បត្តិត្រឹមតែ 5 ប៉ុណ្ណោះដែលអនុញ្ញាតឱ្យយើងគ្រប់គ្រងចលនាផ្លាស់ប្តូរ៖

• ការផ្លាស់ប្តូរ - ទ្រព្យសម្បត្តិ;
• រយៈពេលនៃការផ្លាស់ប្តូរ;
• ការផ្លាស់ប្តូរពេលវេលា - មុខងារ;
• ការពន្យាពេលនៃការផ្លាស់ប្តូរ;
• ការផ្លាស់ប្តូរ;

ការផ្លាស់ប្តូរ - ទ្រព្យសម្បត្តិ- បញ្ជាក់បញ្ជីនៃលក្ខណៈសម្បត្តិដែលនឹងមានចលនា; លក្ខណៈសម្បត្តិដែលមិនបានបញ្ជាក់នៅទីនេះនឹងត្រូវបានកែប្រែជាធម្មតា។ អ្នកអាចធ្វើឱ្យមានចលនាគ្រប់លក្ខណៈសម្រាប់ ធាតុជាក់លាក់បញ្ជាក់តម្លៃទាំងអស់។ ប្រសិនបើអ្នកមិនបញ្ជាក់លក្ខណៈសម្បត្តិណាមួយទេ តម្លៃលំនាំដើមគឺទាំងអស់។

Transition-property: width;

រយៈពេលអន្តរកាល- កំណត់រយៈពេលនៃចលនា ពេលវេលាអាចត្រូវបានបញ្ជាក់ជាវិនាទី ឬមិល្លីវិនាទី។

រយៈពេលផ្លាស់ប្តូរ៖ 1s;

transition-time-function- មុខងារពេលវេលា បង្ហាញពីចំណុចនៃការបង្កើនល្បឿន និងការបន្ថយល្បឿនសម្រាប់ រយៈពេលជាក់លាក់ពេលវេលាដើម្បីគ្រប់គ្រងការផ្លាស់ប្តូរល្បឿនចលនា។ និយាយឱ្យសាមញ្ញ អ្នកអាចប្រើលក្ខណសម្បត្តិនេះដើម្បីបញ្ជាក់ឥរិយាបថសម្រាប់ចលនា។ ជាឧទាហរណ៍ យើងអាចបង្កើនល្បឿនចលនានៅដើមដំបូង ហើយបន្ថយវានៅចុងបញ្ចប់ ឬផ្ទុយទៅវិញ។ ខ្សែកោង Bezier ត្រូវបានប្រើដើម្បីកំណត់ដំណើរការចលនា។ ជាទូទៅ មុខងារផ្លាស់ប្តូរពេលវេលាអនុញ្ញាតឱ្យអ្នកបង្កើតឥរិយាបថផ្សេងៗគ្នាជាច្រើនសម្រាប់ចលនា នេះគឺជាប្រធានបទទាំងមូលសម្រាប់អត្ថបទមួយ ដូច្នេះយើងនឹងមិនស៊ីជម្រៅនៅទីនេះទេ។

មុខងារផ្លាស់ប្តូរពេលវេលា៖ cubic-bezier(0, 0, 1, 1);

ការពន្យាពេលនៃការផ្លាស់ប្តូរ- កំណត់ការពន្យាពេលមុនពេលចាប់ផ្តើមនៃចលនា អាចត្រូវបានបញ្ជាក់ជាវិនាទី ឬមិល្លីវិនាទី។

ការពន្យាពេលនៃការផ្លាស់ប្តូរ: 500ms;

ការផ្លាស់ប្តូរ- នេះ។ ទ្រព្យសម្បត្តិទូទៅដែលអនុញ្ញាតឱ្យអ្នករាយបញ្ជីលក្ខណៈសម្បត្តិទាំងបួនដំបូងតាមលំដាប់លំដោយ៖ ទ្រព្យសម្បត្តិ រយៈពេល មុខងារ ពេលវេលា ការពន្យាពេល។

ការផ្លាស់ប្តូរ៖ ពណ៌ផ្ទៃខាងក្រោយ 1s cubic-bezier (0, 0, 1, 1) 500ms;

នេះជាអ្វីដែលយើងទទួលបាន ចលនាសាមញ្ញ៖ នៅពេលអ្នកដាក់កណ្ដុរលើការ៉េ ទទឹងនឹងផ្លាស់ប្តូរ។ រយៈពេលចលនាគឺមួយវិនាទី; ចលនាលេងនៅលើ មុខងារលីនេអ៊ែរ; ពន្យាពេលមុនពេលចលនាចាប់ផ្តើម 500 មីលីវិនាទី។

ជាមួយ ដោយប្រើ CSSការផ្លាស់ប្តូរអាចធ្វើឱ្យមានចលនាស្ទើរតែគ្រប់លក្ខណៈទាំងអស់ និងបង្កើតចលនាគួរឱ្យចាប់អារម្មណ៍ ស្រស់ស្អាត មុខងារ និងសូម្បីតែស្មុគស្មាញជាច្រើនដែលនឹងបំពេញបន្ថែម និងពង្រឹងគម្រោងរបស់អ្នក។ ឧទាហរណ៍ ខ្ញុំបានបង្កើត Material-FAB ​​​​នេះនៅលើ CSS សុទ្ធការប្រើប្រាស់ការផ្លាស់ប្តូរ៖

ចលនា CSS

ចលនា CSS អនុញ្ញាតឱ្យអ្នកបង្កើតចលនាស្មុគស្មាញជាងការផ្លាស់ប្តូរ CSS ។ អាថ៌កំបាំងទាំងមូលគឺនៅក្នុង @keyframes ។ ច្បាប់ @keyframes អនុញ្ញាតឱ្យអ្នកបង្កើតចលនាដោយប្រើសំណុំនៃស៊ុមគន្លឹះ ពោលគឺវាពិពណ៌នាអំពីស្ថានភាពនៃវត្ថុនៅក្នុង ពេលជាក់លាក់ពេលវេលា។ សូមក្រឡេកមើលឧទាហរណ៍ដ៏សាមញ្ញមួយ។

រង្វង់​របស់​យើង​បាន​រស់​ឡើង​វិញ ហើយ​វា​ហាក់​ដូច​ជា​លោត​ញាប់។

មានលក្ខណៈសម្បត្តិ 9 ដែលអនុញ្ញាតឱ្យអ្នកគ្រប់គ្រងចលនា CSS:

• ឈ្មោះចលនា;
• ចលនា - រយៈពេល;
• ចលនា - ពេលវេលា - មុខងារ;
• ការពន្យាពេលចលនា;
• ចលនា - ការរាប់ឡើងវិញ;
• ចលនា - ទិសដៅ;
• ចលនា - លេង - រដ្ឋ;
• ចលនា - របៀបបំពេញ;
• ចលនា;

ឈ្មោះចលនា- នេះគឺជាឈ្មោះរបស់ចលនាដែលភ្ជាប់ច្បាប់ @keyframes ជាមួយអ្នកជ្រើសរើស។

គំនូរជីវចល - ឈ្មោះ៖ ចលនារបស់ខ្ញុំ;

ចលនា - ការរាប់ឡើងវិញ@keyframes my-animation ( 0% ( ភាពស្រអាប់៖ 0; ) 100% ( ភាពស្រអាប់៖ 1; ))

- កំណត់ចំនួនពាក្យដដែលៗនៃចលនា តម្លៃលំនាំដើមគឺ 1. តម្លៃគ្មានកំណត់ មានន័យថា ចលនានឹងលេងមិនចេះចប់។

Animation-iteration-count: 2;ចលនា - ទិសដៅ

- កំណត់ទិសដៅនៃចលនា។

ចលនា - ទិសដៅ: បញ្ច្រាស; - ចលនា - លេង - ស្ថានភាពទ្រព្យសម្បត្តិនេះ។

គ្រប់គ្រងការបញ្ឈប់ និងការលេងចលនា។ មាន​តម្លៃ​ពីរ​គឺ​កំពុង​ដំណើរការ (ចលនា​លេង​តាម​លំនាំដើម) និង​ផ្អាក (បញ្ឈប់​ចលនា)។

របៀបបំពេញចលនា Animation-play-state: ផ្អាក;

• - កំណត់លក្ខណៈសម្បត្តិ CSS ណាមួយនឹងត្រូវបានអនុវត្តចំពោះវត្ថុមុន ឬក្រោយចលនា។ អាចយកតម្លៃដូចខាងក្រោមៈ
• គ្មាន - លក្ខណៈសម្បត្តិ CSS ដែលមានចលនានឹងត្រូវបានអនុវត្តចំពោះវត្ថុតែនៅពេលដែលចលនាកំពុងលេង ហើយនៅពេលបញ្ចប់ វត្ថុនឹងត្រឡប់ទៅសភាពដើមរបស់វាវិញ។
• បញ្ជូនបន្ត - លក្ខណៈសម្បត្តិ CSS ដែលមានចលនានឹងត្រូវបានអនុវត្តទៅវត្ថុបន្ទាប់ពីចលនាបានបញ្ចប់ការលេង។
• ថយក្រោយ - លក្ខណៈសម្បត្តិ CSS ដែលមានចលនានឹងត្រូវបានអនុវត្តចំពោះវត្ថុ មុនពេលដែលចលនាចាប់ផ្តើមលេង។

ទាំងពីរ - លក្ខណៈសម្បត្តិ CSS ដែលមានចលនានឹងត្រូវបានអនុវត្តចំពោះវត្ថុទាំងមុន និងក្រោយចលនាបញ្ចប់។

របៀបបំពេញចលនា៖ ថយក្រោយ; ចលនា - រយៈពេល, មុខងារកំណត់ពេលវេលាចលនា, ការពន្យាពេលចលនាទ្រព្យសម្បត្តិ

ពួកវាដំណើរការដូចគ្នាទៅនឹងលក្ខណៈសម្បត្តិស្រដៀងគ្នានៅក្នុងការផ្លាស់ប្តូរ CSS ដែលខ្ញុំបានសរសេរអំពីមុន ដូច្នេះខ្ញុំនឹងមិនធ្វើវាម្តងទៀតទេ។ ជាមួយនឹងចលនា CSS អ្នកអាចបង្កើតចលនាស្មុគស្មាញដោយមិនចាំបាច់. ដោយប្រើ JavaScriptឧទាហរណ៍ដ៏គួរឱ្យចាប់អារម្មណ៍មួយ។

- ទាំងនេះគឺជាកម្មវិធីផ្ទុកទិន្នន័យ ដែលបង្ហាញថាមានអ្វីមួយកំពុងផ្ទុកនៅលើទំព័ររបស់អ្នក។ នេះគឺជាឧទាហរណ៍មួយចំនួន៖

ម៉ូឌុលផ្លូវចលនា Motion Path Module CSS អនុញ្ញាត​ឱ្យ​អ្នក​បង្កើត​ចលនា​របស់​វត្ថុ​តាម​ផ្លូវ​មួយ​តាម​រយៈ​លក្ខណសម្បត្តិ​ផ្លូវ​ចលនា​ពិសេស។ ពីមុន ចលនាបែបនេះអាចធ្វើបានតែជាមួយដោយប្រើ SVG

ឬស្គ្រីបស្មុគស្មាញ។

• ការ​បញ្ជាក់​នេះ​មាន​លក្ខណៈ​សម្បត្តិ​ចំនួន ៣៖
• ផ្លូវចលនា;
• ចលនា - អុហ្វសិត;

ចលនា - បង្វិល;ផ្លូវចលនា

- លក្ខណសម្បត្តិនេះអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ចំណុច (កូអរដោនេ) ដែលវត្ថុនឹងផ្លាស់ទី។ វាក្យសម្ព័ន្ធគឺដូចគ្នាទៅនឹងគុណលក្ខណៈផ្លូវ SVG ។

Motion-path: path("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");- លក្ខណសម្បត្តិនេះកំណត់វត្ថុមួយក្នុងចលនាពីចំណុចចាប់ផ្តើមទៅចំណុចបញ្ចប់។ វាទទួលយកទាំងប្រវែងទ្វេដងឬភាគរយ។ ដើម្បីឱ្យវត្ថុចាប់ផ្តើមផ្លាស់ទី អ្នកត្រូវកំណត់ចលនាដែលនឹងទៅពី 0 ទៅ 100%។

@keyframes airplane-fly ( 0% ( motion-offset: 0; ) 100% ( motion-offset: 100%; ))

ចលនា - បង្វិល- លក្ខណសម្បត្តិនេះអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ថាតើផ្នែកមួយណាទៅមុខដែលវត្ថុនឹងផ្លាស់ទី។ អ្នកអាចបញ្ជាក់ដោយស្វ័យប្រវត្តិ បញ្ច្រាស ឬតម្លៃផ្ទាល់ខ្លួនរបស់អ្នកជាដឺក្រេ ("-45deg", "30deg" ។ល។)។

ចលនាបង្វិល៖ ស្វ័យប្រវត្តិ;

ជាអកុសល ចលនា-ផ្លូវ បច្ចុប្បន្នត្រូវបានគាំទ្រតែនៅក្នុង Chrome និង Opera ប៉ុណ្ណោះ ប៉ុន្តែសូមឱ្យយើងសង្ឃឹមថាកម្មវិធីរុករកផ្សេងទៀតនឹងធ្វើតាមគំរូរបស់ពួកគេក្នុងពេលឆាប់ៗនេះ ព្រោះរឿងនេះពិតជាមានប្រយោជន៍។

សម្រាប់អ្នកដែលមិនទាន់យល់ពីរបៀបដែលវាដំណើរការ ឬចង់យល់កាន់តែច្បាស់ ខ្ញុំបានធ្វើឧទាហរណ៍មួយ (link to codeopen)។

ការបង្កើតចលនាស្មុគ្រស្មាញ ពេលខ្លះអាចក្លាយជាដំណើរការដែលចំណាយពេលច្រើន ហើយនេះជាកន្លែងដែលបណ្ណាល័យ និងម៉ាស៊ីនបង្កើតចលនាមកងាយស្រួល។ អត្ថបទនេះផ្តល់នូវបញ្ជី ឧបករណ៍ល្អបំផុតដើម្បីបង្កើតចលនា CSS3 ។

1. Magic CS33 Animations

Magic CSS3 Animations គឺជាកញ្ចប់នៃចលនា CSS3 ជាមួយនឹងបែបផែនពិសេសដែលអ្នកអាចប្រើដោយសេរីសម្រាប់គម្រោងគេហទំព័រណាមួយ។ គ្រាន់តែបើកវា។ រចនាប័ទ្ម CSS magic.css ឬកំណែតូចនៃ magic.min.css ។

2. CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet គឺជាសំណុំនៃគំនូរជីវចលដោត និងលេងដែលបានដំឡើងជាមុនសម្រាប់គម្រោងបណ្ដាញ។ ដើម្បីប្រើវា អ្នកត្រូវបន្ថែមរចនាប័ទ្មទៅគេហទំព័រ ហើយអនុវត្តរចនាប័ទ្មដែលបានរៀបចំ ថ្នាក់ CSSទៅធាតុដែលអ្នកចង់ធ្វើចលនា។ CSS3 Animation Cheat Sheet ប្រើច្បាប់ @keyframes និងដំណើរការទាំងអស់។ កំណែចុងក្រោយបំផុត។កម្មវិធីរុករក (រួមទាំង IE 10) ។

3. CSS3 Keyframes

CSS3 Keyframes Animation Generatorគឺជាឧបករណ៍អនឡាញដែលអនុញ្ញាតឱ្យអ្នកបង្កើតចលនាដោយប្រើច្បាប់ @keyframes ។

4. វេទមន្ត

រួមបញ្ចូលផលប៉ះពាល់ CSS ជាច្រើន។ ផលប៉ះពាល់ត្រូវបានតម្រៀបទៅជាប្រភេទជាច្រើន ( វេទមន្ត, ទស្សនវិស័យ, ការបង្វិល, ភ្លឹបភ្លែតៗ, ឋិតិវន្ត, ស្លាយ, CSS3 ដាក់ចលនា) ហើយពួកគេទាំងអស់គឺស្រស់ស្អាតណាស់។ ពួកគេម្នាក់ៗមានថ្នាក់រៀងៗខ្លួន។ មធ្យោបាយងាយស្រួលបំផុតដើម្បីអនុវត្តពួកវាគឺត្រូវបន្ថែមថ្នាក់ទាំងនេះទៅធាតុគោលដៅតាមរយៈ JavaScript ។

5. Animate.css

Animate.css ផ្តល់នូវសំណុំនៃបែបផែនចលនា CSS3 ឆ្លងកាត់កម្មវិធីរុករក។ បែបផែន​អាច​ត្រូវ​បាន​ប្រើ​ដើម្បី​ទាក់ទាញ​ការ​ចាប់​អារម្មណ៍ បង្កើត​ចលនា​ដោយ​ផ្អែក​លើ​រូបរាង និង​ការ​បាត់​ខ្លួន​នៃ​ធាតុ។

6. លោត។ ច

នេះ។ បណ្ណាល័យ JavaScriptដើម្បីបង្កើតចលនាថាមវន្ត។ គ្រាន់តែបន្ថែមសមាសធាតុមួយហើយជ្រើសរើសការកំណត់ជាមុន។ បន្ទាប់ពីនេះ អ្នកអាចទទួលបាន URL ខ្លីមួយ ឬនាំចេញចលនា CSS3 ពីឧទាហរណ៍។

7. Hover.CSS

Hover.CSS គឺជាបណ្តុំដ៏មានប្រយោជន៍នៃបែបផែន CSS3 ដែលអាចត្រូវបានប្រើសម្រាប់ការហៅទៅកាន់សកម្មភាព ប៊ូតុង និមិត្តសញ្ញា។ រូបភាពពិសេសហើយដូច្នេះនៅលើ។ ដើម្បីប្រើបណ្តុំនេះ គ្រាន់តែចម្លង និងបិទភ្ជាប់កូដបែបផែនទៅក្នុង CSS ឬដាក់តំណភ្ជាប់ទៅឯកសាររចនាប័ទ្មរបស់វា។

៨.Ani.js

AniJS គឺជាបណ្ណាល័យគំនូរជីវចល CSS ដែលត្រូវបានប្រកាស ដែលធ្វើឱ្យការអភិវឌ្ឍន៍របស់អ្នកកាន់តែលឿន និងសម្បូរបែប។ វាត្រូវបានចងក្រងជាឯកសារយ៉ាងពេញលេញ និងងាយស្រួលប្រើ។

9. Progress.js

ProgressJs គឺជាបណ្ណាល័យ JavaScript និង CSS3 ដែលជួយអ្នកអភិវឌ្ឍន៍បង្កើត និងគ្រប់គ្រងរបារវឌ្ឍនភាព។ អ្នកអាចបង្កើត គំរូផ្ទាល់ខ្លួនសម្រាប់របារវឌ្ឍនភាព ឬងាយស្រួលប្ដូរតាមបំណងដែលត្រៀមរួចជាស្រេច។

10. Keyframer

Keyframer គឺ ឧបករណ៍ងាយស្រួលដែលនឹងជួយអ្នកបង្កើតចលនា CSS3 ។ Keyframer គឺងាយស្រួលប្រើណាស់។ ដើម្បីបន្ថែមស៊ុមគន្លឹះ អ្នកគ្រាន់តែចុចលើបន្ទាត់ពេលវេលា ហើយបន្ទាប់មកចុចលើប៊ូតុងមូល ដើម្បីអនុវត្តរចនាប័ទ្ម CSS សម្រាប់ចលនា។ ឬប៊ូតុងឈើឆ្កាងដើម្បីលុបស៊ុមបច្ចុប្បន្ន។

11. ស្ទីលលី

ឧបករណ៍សម្រាប់ ការបង្កើតងាយស្រួល CSS3 ចលនា។ អ្នកត្រូវរៀបចំចលនាដោយប្រើក្រាហ្វ ផ្លាស់ប្តូរវា ទទួលបានកូដ CSS ដែលបានបង្កើត ហើយអ្នករួចរាល់ហើយ!

12.CSSketch

CSSketch គឺជាកម្មវិធីជំនួយ Sketch 3 ដែលអនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរការរចនារបស់អ្នកបានយ៉ាងឆាប់រហ័សដោយបញ្ចូលសន្លឹករចនាប័ទ្ម។ វាគាំទ្រភាសារចនាប័ទ្ម ( តិច) វាអនុញ្ញាតឱ្យអ្នកប្រើមុខងារ និងអថេរនៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នក។ CSSketch គឺ កម្មវិធីជាមួយនឹងការបើកចំហយ៉ាងពេញលេញ កូដប្រភពដូច្នេះអ្នកអាចរួមចំណែកដល់ការអភិវឌ្ឍន៍របស់វា។

13. ALighter

កម្មវិធីជំនួយ JQuery សម្រាប់បង្កើតពន្លឺមានចលនា និង CSS3 ផ្ទៃខាងក្រោយមានចលនា។ អ្នកអាចកំណត់ចលនាតាមបំណង ( ល្បឿននិងទំហំ), ឥទ្ធិពល ( ពណ៌ តម្លាភាព និងព្រិល) ហើយកំណត់រយៈពេលជាក់លាក់ ឬបិទកម្មវិធីកំណត់ម៉ោងទាំងស្រុង។

14. deCSS3

នេះគឺជាឧបករណ៍សម្រាប់សាកល្បងការអត់ធ្មត់កំហុស ( ការរិចរិលបន្តិចម្តងៗ ) កូដ CSS3 ។ ជាមួយវា អ្នកអាចមើលឃើញពីរបៀបដែលគេហទំព័រនឹងត្រូវបានបង្ហាញនៅក្នុងកំណែ IE 6-8 ។

15.GFX

GFX គឺជាបណ្ណាល័យគំនូរជីវចល 3D CSS3 ដែលពង្រីក JQuery ជាមួយមួយចំនួន លក្ខណៈពិសេសមានប្រយោជន៍សម្រាប់ ការបង្កើតកម្មវិធីការផ្លាស់ប្តូរ CSS3 ដែលត្រូវបានគ្រប់គ្រងដោយប្រើវិធីសាស្ត្រ setTimeout ។

ការបកប្រែអត្ថបទ " 15 ចលនា CSS3 ល្អបំផុត ឧបករណ៍សម្រាប់អ្នកអភិវឌ្ឍន៍» ត្រូវបានរៀបចំដោយក្រុមគម្រោងមិត្តភាព