Animation հատկությունը

animation հատկությունը անիմացիայի համառոտ գրառումն է, որը թույլ է տալիս միաժամանակ նշել անիմացիայի բոլոր հատկությունները՝ animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state:

Արժեքների հերթականությունը կարևոր չէ, անիմացիայի կատարման տևողությունը animation-duration պարտադիր պետք է նշվի ուշացումից animation-delay առաջ: Պարտադիր են միայն animation-name և animation-duration հատկությունները:

Հատկությունը կարող է ընդունել նաև none արժեքը, որը լրիվ անջատում է անիմացիան: Այս արժեքը հանդիսանում է սկզբնադիր արժեք:

Շարահյուսություն

cssընտրող {
  animation: արժեքներ;
}

Օրինակ

Այս օրինակում անիմացիան կունենա 3 վայրկյան ուշացում (ամեն նոր կատարումից առաջ), այնուհետև անիմացիան կկատարվի 6 վայրկյան ընթացքում:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Օրինակ . Հնարավոր խնդիրներ

Համառոտ ձևով գրված անիմացիան կարող է չաշխատել իր անվան պատճառով: Դիտարկենք հետևյալ անիմացիան.

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Նկատեք, որ ես օգտագործում եմ reverse անիմացիայի անուն: Առաջին հայացքից ամեն ինչ կարգին է, բայց անիմացիան չի աշխատում, քանի որ reverse-ը animation-direction հատկության վավեր բանալի բառ է:

Նաև անիմացիան չի աշխատի համառոտ ձևում օգտագործելիս, եթե անվան մեջ կան այլ բանալի բառեր: Սակայն ամեն ինչ լավ աշխատում է "լրիվ" ձևի նկարագրություն օգտագործելիս:

animation-direction հատկության բանալի բառերին, որոնք խափանում են անիմացիաները, պետք է դասել նաև հարթեցման ֆունկցիաներին վերաբերող բանալի բառերը, ինչպես նաև infinite, alternate, running, paused և այլն:

Տես նաև