კონდახი - css ანიმაცია. დანართი - css ანიმაცია ანიმაციის მოკლე ჩანაწერი: ძალაუფლების ანიმაცია

CSS3 ანიმაციააძლევს საიტებს დინამიურობას. ვონი აცოცხლებს ვებ გვერდებს, ზრდის კლიენტთან ურთიერთქმედებას. CSS3 გადასვლების გარდა, ანიმაცია დაფუძნებულია საკვანძო კადრებზე, რაც საშუალებას გაძლევთ ავტომატურად შექმნათ და გაიმეოროთ ეფექტები მოცემულ საათში, ასევე შეაჩეროთ ანიმაცია ციკლის შუაში.

CSS3 ანიმაცია შეიძლება განხორციელდეს პრაქტიკულად ყველა html ელემენტისთვის, ასევე ფსევდოელემენტებისთვის: ადრე და შემდეგ. ანიმაციური ავტორიტეტების სია ხელმისაწვდომია გვერდზე. ანიმაციის შექმნისას არ დაივიწყოთ შესაძლო პრობლემებიპროდუქტიულობა, ვინაიდან არსებული ხელისუფლების შეცვლა დიდ რესურსს მოითხოვს.

CSS ანიმაციის შესავალი

ბრაუზერის მხარდაჭერა

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -ვებ ნაკრები-
Safari: 4.0 -ვებ ნაკრები-
ოპერა: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -ვებ ნაკრები-
Opera Mini: —
Android ბრაუზერი: 44, 4.1 -ვებ ნაკრები-
Chrome Android-ისთვის: 44

1. საკვანძო ჩარჩოები

Keyframes გამოიყენება ანიმაციის კონტროლის მნიშვნელობის აღსანიშნავად ანიმაციის სხვადასხვა წერტილში. Keyframes წარმოადგენს ერთი ანიმაციური ციკლის ქცევას; ანიმაცია შეიძლება განმეორდეს ნულამდე ან მეტჯერ.

Keyframes მითითებულია დამატებითი @keyframes წესის გამოყენებით, რომელიც მითითებულია შემდეგნაირად:

@keyframes ანიმაციის სახელები (წესების სია)

ანიმაციის შექმნა იწყება ინსტალაციით ძირითადი პერსონალი@keyframes წესები. კადრებში მითითებულია, რომელი ავტორიტეტები რომელ ეტაპზე იქნება ანიმაციური. თითოეული ჩარჩო შეიძლება შეიცავდეს ერთ ან მეტ დარტყმის ბლოკს ერთი ან მეტი სიმძლავრის წყვილიდან და მნიშვნელობიდან. @keyframes წესი ემთხვევა ელემენტის ანიმაციას, რომელიც აკავშირებს ელემენტის ხმის წესსა და ბლოკს.

@keyframes shadow (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px შავი;))

საკვანძო ჩარჩოები შექმნილია დახმარებისთვის საკვანძო სიტყვებიდან და მდე (ექვივალენტური მნიშვნელობების 0% და 100%) ან დამატებითი პროცენტული ქულებით, რომელიც შეიძლება დაყენდეს ნებისმიერ დროს. თქვენ ასევე შეგიძლიათ დააკავშიროთ საკვანძო სიტყვები და პროცენტული ქულები. თუ კადრებს აქვთ იგივე ძალა და მნიშვნელობა, ისინი შეიძლება გაერთიანდნენ ერთ განცხადებაში:

@keyframes გადაადგილება (დან, ზევით: 0; მარცხნივ: 0;) 25%, 75% (ზედა: 100%;) 50% (ზემოდან: 50%;))

თუ 0% ან 100% ჩარჩოები არ არის მითითებული, ბრაუზერი ქმნის მათ, ითვლის (როგორც მითითებულია) ანიმაციური სიმძლავრის მნიშვნელობები.

ვინაიდან რიგი @keyframes წესები განსაზღვრულია ერთიდაიგივე სახელებით, დანარჩენი გამოიყენება დოკუმენტის თანმიმდევრობით და ყველაფერი, რაც წინ არის იგნორირებულია.

გაოგნებული @keyframes წესების შემდეგ, ჩვენ შეგვიძლია დავეყრდნოთ ახალს ძლიერ ანიმაციაში:

H1 (შრიფტის ზომა: 3.5em; ფერი: darkmagenta; ანიმაცია: shadow 2s infinite ease-in-out;)

არ არის რეკომენდებული არარიცხობრივი მნიშვნელობების ანიმაცია (იშვიათი გაფრთხილებით), რადგან შედეგი შეიძლება არ იყოს გამოსახული ბრაუზერში. ასევე, არ უნდა შექმნათ საკვანძო ჩარჩოები სიმძლავრის მნიშვნელობებისთვის, რომლებიც არ ქმნიან შუა წერტილებს, მაგალითად, სიმძლავრის მნიშვნელობებისთვის ფერი: ვარდისფერი და ფერი: #ffffff, სიგანე: ავტომატური და სიგანე: 100 პიქსელი ან საზღვრის რადიუსი: 0 და სასაზღვრო-რადიუსი: 50% (ამ მაგალითში სწორი იქნება საზღვრის რადიუსის შეყვანა: 0%).

1.1. დროის ფუნქცია საკვანძო ჩარჩოებისთვის

საკვანძო კადრის სტილის წესმა ასევე შეიძლება ხელი შეუშალოს დროის ფუნქციას, რაც მოითხოვს მის გამოსწორებას ანიმაციის შემდეგ საკვანძო კადრზე გადატანისას.

კონდახი

@keyframes bounce (ზემოდან: 100 პიქსელი; ანიმაცია-დროის ფუნქცია: გამარტივება;) 25% (ზედა: 50 პიქსელი; ანიმაცია-დროის ფუნქცია: მარტივია;) 50% (ზედა: 100 პიქსელი; ანიმაცია-დრო- ფუნქცია: ease-out;) 75% (ზედა: 75px; ანიმაცია-დროის-ფუნქცია: ease-in;) (ზემოდან: 100px;))

ანიმაციისთვის, სახელწოდებით "bounce" მითითებულია ხუთი ძირითადი ჩარჩო. პირველ და მეორე საკვანძო ჩარჩოს შორის (0%-დან 25%-მდე), არჩეულია გაუმჯობესების ფუნქცია. მეორე და მესამე საკვანძო ჩარჩოს შორის (25%-დან 50%-მდე), არჩეულია გლუვი აჩქარების ფუნქცია. Და ასე შემდეგ. ელემენტი გადავა გვერდით 50 პიქსელით, დარეგულირდება, როგორც კი აღწევს მაღალ წერტილს და შემდეგ დააჩქარებს 100 პიქსელამდე ვარდნისას. ანიმაციის მეორე ნახევარი შესრულებულია ანალოგიურად, გარდა იმისა, რომ ის ელემენტს 25 პიქსელზე მაღლა აწევს.

დროის საათის ფუნქცია, რომელიც მინიჭებულია საკვანძო კადრზე ან 100%-ზე, იგნორირებულია.

2. ანიმაციის სახელი: power animation-name

ანიმაციის სახელის ძალა განსაზღვრავს ელემენტზე მიმაგრებული ანიმაციების ჩამონათვალს. ყოველ ჯერზე თქვენ უნდა აირჩიოთ საკვანძო ჩარჩო წესში, რომელიც განსაზღვრავს ანიმაციის კონტროლის მნიშვნელობებს. იმის გამო, რომ სახელი არ შეესაბამება წესის ყველა საკვანძო ჩარჩოს, ანიმაციისთვის ძალა არ არის და ანიმაცია არ შეიფუთება.

თუ რამდენიმე ანიმაცია ცდილობს შეცვალოს ერთი და იგივე ძალა, ანიმაცია ყველაზე ახლოს მთავრდება სახელების სიის ბოლოს.

ანიმაციები რეგისტრის მგრძნობიარეა და საკვანძო სიტყვა none დაუშვებელია. რეკომენდირებულია სახელის ვიკორიზაცია, რომელიც ასახავს ანიმაციის არსს, ამ შემთხვევაში შეგიძლიათ ვიკორისტოთ ერთი ან რამდენიმე სიტყვა, გადაკვეთილი დეფისით - ან ქვედა ხაზი _.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-სახელი: none; ანიმაცია-სახელი: ტესტი-01; ანიმაცია-სახელი: -სრიალი; ანიმაცია-სახელი: მოძრავი-ვერტიკალურად; ანიმაცია-სახელი: test2; ანიმაცია-სახელი: test3, move4; ანიმაცია-სახელი: საწყისი; ანიმაცია-სახელი: მემკვიდრეობა;

3. ანიმაციის ძალა: ანიმაცია-ხანგრძლივობის ძალა

ანიმაცია-ხანგრძლივობის ძალა ნიშნავს ერთი ანიმაციის ციკლის ხანგრძლივობას. მითითებულია წამებში ან მილიწამებში ms. თუ ელემენტისთვის მითითებულია ერთზე მეტი ანიმაცია, შეგიძლიათ დააყენოთ სხვადასხვა საათიკანისთვის, რომელმაც მნიშვნელობა კომაში გადაიტანა.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-ხანგრძლივობა: .5წ; ანიმაცია-ხანგრძლივობა: 200ms; ანიმაცია-ხანგრძლივობა: 2წ, 10წ; ანიმაცია-ხანგრძლივობა: 15წ, 30წ, 200წმ;

4. დროის ფუნქცია: დენის ანიმაცია-დროის ფუნქცია

ანიმაცია-დროის ფუნქციის სიმძლავრე აღწერს, თუ როგორ განვითარდება ანიმაცია საკვანძო კადრების თითოეულ წყვილს შორის. როდესაც ანიმაცია ჩერდება, დროის საათის ფუნქციები არ იჭედება.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-ტაიმინგი-ფუნქცია: სიმარტივე; ანიმაცია-დროის ფუნქცია: მარტივია; ანიმაცია-ტაიმინგი-ფუნქცია: გამარტივება; ანიმაცია-ტაიმინგი-ფუნქცია: სიმარტივე-შემოსვლა; ანიმაცია-დროის ფუნქცია: ხაზოვანი; ანიმაცია-დროის ფუნქცია: ნაბიჯი-დაწყება; ანიმაცია-ტაიმინგი-ფუნქცია: ნაბიჯი-ბოლო; ანიმაცია-ტაიმინგი-ფუნქცია: cubic-bezier(0.1, 0.7, 1.0, 0.1); ანიმაცია-დროის ფუნქცია: საფეხურები (4, დასასრული); ანიმაცია-დროის ფუნქცია: სიმარტივე, ნაბიჯის დაწყება, კუბური-ბეზიერი (0.1, 0.7, 1.0, 0.1); ანიმაცია-დროის ფუნქცია: საწყისი; ანიმაცია-დროის ფუნქცია: მემკვიდრეობა;

დამატებითი ანიმაციისთვის შეგიძლიათ შექმნათ მისი ეფექტი, მაგალითად, ტექსტი ან მიზიდულობის მაჩვენებელი მოქმედებს.

5. ანიმაციის გამეორება: ძალაუფლების ანიმაცია-გამეორება-თვლა

ანიმაცია-გამეორება-დათვლის სიმძლავრე განსაზღვრავს რამდენჯერ გადის ანიმაციის ციკლი. Cob მნიშვნელობა 1 ნიშნავს, რომ ანიმაცია ბოლომდე იმუშავებს ერთ კობზე. ეს სიმძლავრე ხშირად შერწყმულია ალტერნატიული სიმძლავრის ანიმაცია-მიმართულების მნიშვნელობებთან, რაც იწვევს ანიმაციის შექმნას საპირისპირო მიზნით ალტერნატიულ ციკლებში.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-გამეორება-თვლა: უსასრულო; ანიმაცია-გამეორება-თვლა: 3; ანიმაცია-გამეორება-თვლა: 2.5; ანიმაცია-გამეორება-თვლა: 2, 0, უსასრულო;

6. პირდაპირი ანიმაცია: ანიმაცია-მიმართულების ძალა

ანიმაციის მიმართულების ძალა ნიშნავს, რომ ანიმაცია უნდა შეიქმნას საპირისპირო თანმიმდევრობით ნებისმიერ ან ყველა ციკლში. თუ ანიმაცია შესრულებულია საპირისპირო თანმიმდევრობით, დროის ფუნქციებიც შებრუნებულია. მაგალითად, როდესაც განხორციელდება საპირისპირო თანმიმდევრობით, ease-in ფუნქცია იქცევა როგორც ease-out.

ძალა არ ქრება.

იმის დასადგენად, ანიმაციის ციკლი მეორდება წყვილებში თუ დაუწყვილებლად, გამეორებების რაოდენობა იწყება 1-დან.

სინტაქსი

ანიმაცია-მიმართულება: ნორმალური; ანიმაცია-მიმართულება: საპირისპირო; ანიმაცია-მიმართულება: ალტერნატიული; ანიმაცია-მიმართულება: ალტერნატიული-უკუ; ანიმაცია-მიმართულება: ნორმალური, საპირისპირო; ანიმაცია-მიმართულება: ალტერნატიული, საპირისპირო, ნორმალური; ანიმაცია-მიმართულება: საწყისი; ანიმაცია-მიმართულება: მემკვიდრეობა;

7. ანიმაციის შექმნა: ანიმაცია-თამაში-მდგომარეობის ძალა

ანიმაცია-თამაშის მდგომარეობის ძალა განსაზღვრავს ანიმაციის დაწყებას თუ შესრულებას. ციკლის შუაში ანიმაციის ბმული შესაძლებელია ძალაუფლების გამოყენებით JavaScript სკრიპტი. თქვენ ასევე შეგიძლიათ შეაჩეროთ ანიმაცია, როდესაც მაუსის კურსორი დევს ობიექტზე - stan: hover.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-თამაში-მდგომარეობა: სირბილი; ანიმაცია-თამაში-მდგომარეობა: შეჩერებულია; ანიმაცია-თამაში-მდგომარეობა: შეჩერებული, გაშვებული, გაშვებული; ანიმაცია-თამაში-მდგომარეობა: საწყისი; ანიმაცია-თამაში-მდგომარეობა: მემკვიდრეობა;

8. ანიმაციის დაყოვნება: ანიმაცია-დაყოვნების ძალა

ანიმაციის დაყოვნების ძალა განსაზღვრავს ანიმაციის დაწყებას. ხელმისაწვდომია წამებში ან მილიწამებში ms.

ძალა არ ქრება.

სინტაქსი

ანიმაცია-დაყოვნება: 5წ; ანიმაცია-დაყოვნება: 3s, 10ms;

9. ელემენტის მდგომარეობა ანიმაციის შექმნამდე და შემდეგ: power animation-fill-mode

ანიმაციის შევსების რეჟიმის ძალა განსაზღვრავს ანიმაციური პოზის მნიშვნელობას და მის გარეგნობას. როდესაც ანიმაცია მთავრდება, ელემენტი ბრუნავს მის გამომავალ სტილზე. ანიმაციის შემდეგ, ანიმაცია არ უწყობს ხელს დენის მნიშვნელობებს, თუ ანიმაცია დაყენებულია ელემენტზე - ანიმაცია-სახელი და ანიმაცია-დაყოვნება. გარდა ამისა, დასრულების შემდეგ, ანიმაცია არ უწყობს ხელს ავტორიტეტების ღირებულებებს მისი დასრულების შემდეგ - ანიმაცია-ხანგრძლივობა და ანიმაცია-გამეორების რაოდენობა. ანიმაციის შევსების რეჟიმის ძალამ შეიძლება გადალახოს ეს ქცევა.

ძალა არ ქრება.

სინტაქსი

Animation-fill-mode: none; ანიმაცია-შევსების რეჟიმი: წინსვლა; ანიმაცია-შევსების რეჟიმი: უკან; animation-fill-mode: ორივე; animation-fill-mode: none, backwards; animation-fill-mode: ორივე, წინ, არცერთი;

10. ანიმაციის მოკლე ჩანაწერი: ძალაუფლების ანიმაცია

შექმნილი ანიმაციის ყველა პარამეტრი შეიძლება გაერთიანდეს ერთ ძალაში - ანიმაციაში, მათი გავლის სივრცეში:
ანიმაცია: ანიმაცია-სახელი ანიმაცია-ხანგრძლივობა ანიმაცია-დროის ფუნქცია ანიმაცია-დაყოვნება ანიმაცია-იტერაცია-თვლა ანიმაცია-მიმართულება;

ანიმაციის შესაქმნელად საჭიროა მხოლოდ ორი კონტროლის მითითება - ანიმაციის სახელი და ანიმაციის ხანგრძლივობა; სხვა კონტროლები იღებენ მნიშვნელობას. ძალაუფლების რეორგანიზაციის ბრძანებას მნიშვნელობა არ აქვს, თუმცა საბოლოო ანიმაციის ანიმაცია-ხანგრძლივობის საათი აუცილებლად დგას ანიმაცია-დაყოვნების წინ.

11. მრავალი ანიმაცია

ერთი ელემენტისთვის შეგიძლიათ დააყენოთ რამდენიმე ანიმაცია, შეცვალოთ მათი სახელები კომაში:

Div (ანიმაცია: shadow 1s ease-in-out 0.5s ალტერნატიული, გადაადგილება 5s ხაზოვანი 2s;)

შეგიძლიათ გამოიყენოთ ანიმაციის ტრივიალურობა, გამეორება, პირდაპირობა, რუხისა და კროსის ტიპი. შეგიძლიათ ნებისმიერი ელემენტის ანიმაცია, ფსევდოელემენტების ჩათვლით.

ობოვიაზკოვა უმოვა - კონკრეტული მნიშვნელობების სიცხადე. ავტომატური მნიშვნელობების მქონე სიმძლავრეები არ არის ანიმაციური.

Safari ამჟამად არ უჭერს მხარს ფსევდოელემენტების ანიმაციას, ჩანაწერის სანახავად გთხოვთ გამოიყენოთ სხვა ბრაუზერები

CSS ანიმაციის მაგალითი:

ანიმაციის კოდის მაგალითი:

@keyframes გადაადგილება (40% (მარცხნივ: 50%; ქვედა: 75%; ანიმაცია-დროის ფუნქცია: ease-in;) 80% (მარცხნივ: 90%; ქვედა: -10em;))

ანიმაციური კავშირები:

მზე (ანიმაცია: გადაადგილება 15 წმ უსასრულო წრფივი;)

მოძრაობა - იმ'ანიმაცია 15წ - ტრივიალურობა უსასრულო - გაუთავებელი გამეორება ხაზოვანი - როჰუს ტიპი

@keyframes

თავად ანიმაცია განთავსებულია @keyframes ბლოკის შუაში. @keyframes-ის შემდეგ დაყენებულია ანიმაციის სახელი და შემდეგ შუაში ფიგურული ტაძრები- її croki.

ტერმინების დაზუსტება შესაძლებელია vidsotki-ით ან საკვანძო სიტყვების გამოყენებით from and to. ამ შემთხვევაში, შეგიძლიათ შეცვალოთ ანიმაციის ტიპი (ანიმაცია-დროის ფუნქცია):

ანიმაცია-სახელი

გამოიყენეთ ვიკი ანიმაციისთვის სახელის დასაყენებლად.

შესაძლო მნიშვნელობები: ერთი ან მეტი ანიმაციის სახელი. სარეცხის მნიშვნელობა: არცერთი.

ანიმაცია-სახელი: გადაადგილება; - ერთი ანიმაცია. ანიმაცია-სახელი: მოძრაობა, მზის ფერი; - ორი ანიმაცია, სახელები მითითებულია კომაში.

ანიმაცია-ხანგრძლივობა

ანიმაციის ძალას აკონტროლებს ანიმაცია-ხანგრძლივობის ძალა.

შესაძლო მნიშვნელობები: საათი წამებში (წმ) ან მილიწამებში (ms). რამდენიმე ანიმაციისთვის, კანის საათი შეიძლება განისაზღვროს კომაში. პოჩატკოვის მნიშვნელობა - 0წ.

ანიმაცია-ტაიმინგი-ფუნქცია

სიმძლავრე ეხება ანიმაციის ტიპს.

შესაძლო მნიშვნელობები:

გლუვი ანიმაციასიმარტივე - გაყალბება (იგულისხმება შეჯვარება) წრფივი - მარჯვენა მხარეს სიმარტივე - აჩქარება ბოლომდე სიმარტივე - აჩქარება კუბამდე სიმარტივე-ჩამოსვლა - უფრო გლუვი გაყალბება, ქვედა სიმარტივე

cubic-bezier (რიცხვი, ნომერი, რიცხვი, ნომერი) საშუალებას გაძლევთ მიუთითოთ დასაკეცი ანიმაციის ტიპი. მნიშვნელობები შეიძლება შეირჩეს ხელით cubic-bezier.com-ზე.

კუბურ-ბეზიერი(.24,1.49, .29, -0.48);

პოკროკოვის ანიმაციანაბიჯ-ნაბიჯ დაწყება და დასასრული - საშუალებას გაძლევთ დააყენოთ ნაბიჯ-ნაბიჯ ანიმაცია და ყოველთვის დააყენოთ კონკრეტული ნაბიჯები. ნაბიჯის დაწყებისას ცვლილებები ხდება მოსავლის დასაწყისში, ხოლო სტეპ-დასრულებით - ბოლოს.

ნაბიჯის დასასრული თუ შეხვალთ ნაბიჯის დაწყებაზე, ექიმი დაიწყებს ერთს.

ნაბიჯები (ნომერი) - საშუალებას გაძლევთ მიუთითოთ ნაბიჯების რაოდენობა, რომლებზეც ანიმაცია იქნება ნაჩვენები, ამ შემთხვევაში თქვენ შეგიძლიათ დააყენოთ მხოლოდ დარჩენილი ნაბიჯები ნაბიჯების მითითების გარეშე.

ანიმაცია-გამეორება-თვლა

აკონტროლებს ანიმაციის გამეორებას. მნიშვნელობები ანიმაციისთვის: 1 (ანიმაცია ითამაშებს ერთხელ).

შესაძლო მნიშვნელობები:

ნომერი - რამდენჯერ უნდა ითამაშოს ანიმაცია. უსასრულო - გაუთავებელი გამეორება.

ანიმაცია- მიმართულება

ეხება პირდაპირ ანიმაციას.

შესაძლო მნიშვნელობები:

ნორმალური - ანიმაცია გათამაშდება სწორი ხაზით, თავიდან ბოლომდე. საპირისპირო - ანიმაცია ითამაშებს საპირისპირო მიმართულებით, შემდეგ ბოლოდან. ალტერნატიული - ანიმაცია ითამაშებს თავიდან ბოლომდე, შემდეგ კი საპირისპირო მიმართულებით. ალტერნატიული-უკუ - ანიმაცია ითამაშებს ბოლოდან დასაწყისამდე, შემდეგ კი საპირისპირო მიმართულებით.

ანიმაცია-თამაში-მდგომარეობა

აკონტროლებს ანიმაციის ტემპს და პროგრესს.

შესაძლო მნიშვნელობები: გაშვებული - ანიმაცია გათამაშდება (მნიშვნელობები დაყენებულია). შეჩერებულია - ანიმაცია ჩერდება პირველ მომენტში.

მართეთ კროკი, თუ არის ღილაკი, არ გამოხვიდეთ, მაგრამ ასევე შეგიძლიათ შეაჩეროთ ანიმაცია: hover:

ანიმაცია-დაყოვნება

დამატებითი ანიმაცია-დაყოვნების გამოყენებით შეგიძლიათ დააყენოთ ანიმაციის დაყოვნება შექმნის დაწყებამდე.

შესაძლო მნიშვნელობები: საათი წამებში (წმ) ან მილიწამებში (ms). მნიშვნელობები შეიძლება იყოს უარყოფითი. რამდენიმე ანიმაციისთვის, კანის საათი შეიძლება განისაზღვროს კომაში. პოჩატკოვის მნიშვნელობა - 0წ.

ანიმაციის შევსების რეჟიმი

სიმძლავრე ნიშნავს გადავა თუ არა ანიმაცია პოზის ელემენტზე ანიმაციის შექმნის საათის შემდეგ.

შესაძლო მნიშვნელობები:

არცერთი - ანიმაცია მიედინება ელემენტზე მხოლოდ შექმნის საათში, დასრულების შემდეგ ელემენტი გადაიქცევა კობ წისქვილში. წინ - ანიმაცია მიედინება ელემენტზე შექმნის დასრულების შემდეგ. უკან - ანიმაცია მიედინება ელემენტზე, სანამ არ შეიქმნება. ორივე - ანიმაცია მიედინება ელემენტზე როგორც შექმნის დასრულებამდე, ასევე მის შემდეგ.

იმის უზრუნველსაყოფად, რომ უკან და ორივე მუშაობს ანიმაციის დაწყებამდე, დააყენეთ ანიმაცია-დაყოვნება: 3s; . ასე რომ, ვისთვის არის აზრი ახალ ფანჯარაში კონდახის გახსნა.

ყველა ეს ძალა შეიძლება ჩაიწეროს სხვა მოკლე ნოტაციის გამოყენებით, მაგალითად:

ანიმაცია: დრო 5s უსასრულო ალტერნატიული;

აშკარა მნიშვნელობებია ანიმაცია და ტრივიალურობა. შემოქმედების მნიშვნელობას ჯერ შემოქმედების წვრილმანი პატივს სცემს, მეორეში კი - დაბრკოლება.

ანიმაციის დაყოვნების სიმძლავრე ადგენს გაგრილებას ანიმაციის ციკლის დაწყებამდე საათით ადრე. მნიშვნელობა 0s ან 0ms იწყებს ანიმაციას მეორე ფაზაში. ნეგატიურ მნიშვნელობებში ასევე შედის ანიმაცია დაჩრდილვის გარეშე, რამაც შეიძლება გამოიწვიოს ანიმაციის გარეგნობის ცვლილება.

მისაღებია გარკვეული მნიშვნელობის მითითება, მათი გადატვირთვა კომაში.

მოკლე ინფორმაცია

სინტაქსი

ანიმაცია-დაყოვნება:<время> [,<время>]*

CSS ანიმაცია არ უნდა დაიწყოს მისი ინიციალიზაციისთანავე. თქვენ შეგიძლიათ აკონტროლოთ ეს ქვაბი გადასვლის-დაყოვნების დამატებითი ძალით. ბოლო საათზე გადასვლის აღსანიშნავად, მიუთითეთ მას მნიშვნელოვანი ძალა:

გადასვლა-დაყოვნება: 1წ; / * ჩართეთ ანიმაცია ერთი წამით * /

ეს ძალა ნაკლებად გამოსაყენებელია საიტზე მარტივი ინტერაქტიულობის განხორციელებისას, მაგრამ ეს შეიძლება იყოს ძალიან რთული, თუ უფრო რთული ეფექტების შექმნა გჭირდებათ. გარდამავალი ხანგრძლივობის ანალოგიით, შეგიძლიათ ჩაწეროთ დაჩრდილვის საათი, რომელიც მინიჭებულია გარდამავალი თვისებისთვის (რომელზეც ასევე მნიშვნელოვანია ხელახლა განლაგების თანმიმდევრობის აღნიშვნა):

გარდამავალი თვისება: ფერი, ფონის ფერი, ასოების ინტერვალი; გადასვლა-ხანგრძლივობა: 1წმ, .5წმ, 2წმ; გადასვლა-დაყოვნება: 0s, 0s, 2s; / * ყინავს ასოთაშორის ანიმაციას 2 წამით * /

არ დაივიწყოთ ბრაუზერის თავსებადობა - ოჯახის აბსოლუტურად ყველა ავტორიტეტი გარდამავალი Vikoristannya გამყიდველის პრეფიქსები:

Webkit-transition-delay: 1s; -moz-გარდამავალი-დაყოვნება: 1წ; -o-გადასვლის-დაყოვნება: 1წ; გადასვლა-დაყოვნება: 1წ;

უფრო პრაქტიკული

პრაქტიკაში, გადასვლის დაყოვნების ძალა ხშირად ჩერდება ჩამოსაშლელი მენიუების შექმნისას, რომლებიც იხსნება კურსორის ზემოდან გადატანისას. ამ კატეგორიაში ის დაფიქსირებულია არა მხოლოდ ყურის წისქვილზე, არამედ ბოლო წისქვილზეც.

ალბათ შენიშნეთ, რომ ზოგიერთ საიტზე არის ქვემენიუები, მიუხედავად იმისა, რომ მათზე დაწკაპუნება მარტივია. ამ ქცევის თავიდან აცილებას ეხმარება გადასვლის-დაყოვნების სიმძლავრე დაყენებული პირველადი ელემენტისთვის და ელემენტისთვის ფსევდოკლასით: hover. მნიშვნელობები შეიცვლება: სიმძლავრის საწყისი მდგომარეობისთვის, გადასვლის-დაყოვნების მნიშვნელობა უნდა იყოს ნულზე მეტი, ხოლო დაკიდებული კურსორის მდგომარეობისთვის ის უნდა დაყენდეს 0-ზე. მაგალითი:

ქვემენიუ (გაუმჭვირვალობა: 0; გადასვლის თვისება: ყველა; გადასვლის-ხანგრძლივობა: .5 წმ; გადასვლის-დაყოვნება: 1 წმ;)

ეს კოდი გამოიწვევს მენიუს გამოჩენას, როდესაც კურსორი გადაინაცვლებს გაქრობის გარეშე და მენიუ გაქრება ერთი წამით. ეს ხრიკი ვიკორისტანს მენიუს აუცილებლად გაუადვილებს.

ბრაუზერის თავსებადობა

ამ გვერდზე თავსებადობის ცხრილი გენერირებულია სტრუქტურირებული მონაცემებიდან. თუ გსურთ თქვენი წვლილი შეიტანოთ მონაცემებში, გთხოვთ, შეამოწმოთ https://github.com/mdn/browser-compat-data და გამოგვიგზავნოთ მოთხოვნა.

განაახლეთ თავსებადობის მონაცემები GitHub-ზე