CSS անիմացիայի գեներատոր
Ստեղծեք CSS keyframes անիմացիաներ կարգավորելի տևողությամբ, արագացմամբ, ուղղությամբ և լրացման ռեժիմով:
Գործարկել գործիքը
Այս առցանց գործիքը ստեղծում է CSS անիմացիայի պատրաստի կոդ keyframes կանոնով և տարրի համապատասխան ոճային հատկություններով: Գեներացվող անիմացիան ապահովում է հարթ հայտնվելու և ուղղահայաց տեղաշարժի էֆեկտ, որտեղ սկզբնական 0% փուլում տարրի թափանցիկությունը (opacity) 0 է, իսկ ուղղահայաց շեղումը (transform translateY)՝ 20 պիքսել: Վերջնական 100% փուլում թափանցիկությունը դառնում է 1, իսկ տեղաշարժը հասնում է 0-ի: Դուք կարող եք ըստ ցանկության կարգավորել անիմացիայի հիմնական պարամետրերը՝ անվանումը, տևողությունը վայրկյաններով, արագացման ֆունկցիան, շարժման ուղղությունը և լրացման ռեժիմը: Եթե դաշտերը դատարկ մնան, ծրագիրն ավտոմատ կերպով կիրառում է լռելյայն արժեքները. անվանումը կլինի fadeIn, տևողությունը՝ 1 վայրկյան, արագացումը՝ ease, ուղղությունը՝ normal, իսկ լրացման ռեժիմը՝ none: Եթե անվան դաշտը լրացված չէ, օգտագործվում է myAnimation անվանումը: Գեներացված պատրաստի CSS տեքստը ներառում է ինչպես @keyframes բլոկը, այնպես էլ տարրի animation հատկությունը, ինչը թույլ է տալիս արագ պատճենել կոդը և անմիջապես օգտագործել ձեր կայքի ոճաթերթում:
Հրահանգներ
- Մուտքագրեք անիմացիայի անվանումը կամ թողեք դաշտը դատարկ լռելյայն fadeIn արժեքի համար:
- Նշեք տևողությունը վայրկյաններով (օրինակ՝ 1 կամ 0.5):
- Ընտրեք կամ մուտքագրեք արագացման ֆունկցիան (օրինակ՝ ease, linear կամ ease-in-out):
- Սահմանեք շարժման ուղղությունը (direction) և լրացման ռեժիմը (fill-mode):
- Սեղմեք գեներացման կոճակը և պատճենեք ստացված CSS կոդը:
Օրինակներ
- fadeIn անվանումով, 2 վայրկյան տևողությամբ, ease-in արագացմամբ, normal ուղղությամբ և forwards ռեժիմով անիմացիա:
- slideUp անվանումով, 0.5 վայրկյան տևողությամբ, linear արագացմամբ, alternate ուղղությամբ և both ռեժիմով անիմացիա:
ՀՏՀ
Ի՞նչ արժեքներ են կիրառվում, եթե դաշտերը չլրացվեն:
Անվանումը դառնում է fadeIn (կամ myAnimation), տևողությունը՝ 1 վայրկյան, արագացումը՝ ease, ուղղությունը՝ normal, իսկ լրացման ռեժիմը՝ none:
Ի՞նչ էֆեկտ է ստեղծում գեներացվող keyframes կանոնը:
Ստեղծվում է երկու փուլ. 0% վիճակում տարրն ունի 0 թափանցիկություն և 20 պիքսել դեպի ներքև շեղում, իսկ 100% վիճակում՝ 1 թափանցիկություն և 0 շեղում:
Ինչպե՞ս է տևողության արժեքն ավելացվում CSS կոդում:
Մուտքագրված թվային արժեքին ավելացվում է վայրկյանի նշումը (օրինակ՝ 1s կամ 0.5s):