Css compositing and blending

animation-play-state

• 
  Animation-play-state CSS xususiyati animatsiya running yoki paused qilinganligini belgilaydi.
  
• 
  
  
• 
  To'xtatilgan animatsiyani davom ettirish animatsiyani animatsiya ketma-ketligining boshidan boshlashdan ko'ra, to'xtatilgan vaqtda to'xtatilgan joyidan boshlaydi.
  

animation-timing-function

• 
  Animation-timing-function CSS xususiyati animatsiyaning har bir sikl davomida qanday davom etishini belgilaydi.
  
• 
  
  

Values

• 
  Ease: cubic-bezier(0,25, 0,1, 0,25, 1,0) teng bo'lgan standart qiymat animatsiyaning o'rtasiga qarab tezlikni oshiradi va oxirida sekinlashadi.
  
• 
  Linear: cubic-bezier (0,0, 0,0, 1,0, 1,0)ga teng, bir xil tezlikda jonlantiriladi.
  
• 
  ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) ga teng,sekin boshlanadi, animatsiya xususiyatining o'tish tezligi tugagunga qadar oshadi.
  
• 
  ease-out: Cubic-bezier(0, 0, 0.58, 1.0) ga teng, tez boshlanadi, animatsiyani sekinlashtirish davom etadi.
  
• 
  cubic-bezier(0.42, 0, 0.58, 1.0) ga teng, jonlantirish xususiyatlari sekin o'tish, tezlashtirish va keyin yana sekinlashadi.
  
• 
  cubic-bezier(p1, p2, p3, p4): Muallif kub-bezier egri chizig'ini aniqladi, bu erda p1 va p3 qiymatlari 0 dan 1 gacha bo'lishi kerak.
  
• 
  steps(n, ): O'tish bo'ylab n ta to'xtash bo'ylab animatsiya iteratsiyasini ko'rsatadi, har bir to'xtash teng vaqt oralig'ida ko'rsatiladi. Misol uchun, agar n 5 bo'lsa, 5 bosqich mavjud. Animatsiya 0%, 20%, 40%, 60% va 80%, 20%, 40%, 60%, 80% va 100% da vaqtincha ushlab turiladimi yoki 0% va 100% oraligʻida 5 ta toʻxtash qiladimi? animatsiya yoki 0% va 100% belgilarini (0%, 25%, 50%, 75% va 100%) oʻz ichiga olgan holda 5 ta toʻxtash quyidagi oʻtish atamalaridan qaysi biri ishlatilishiga bogʻliq:
  
• 
  jump-start: Chapdan uzluksiz funksiyani bildiradi, shuning uchun birinchi sakrash animatsiya boshlanganda sodir bo'ladi;
  
• 
  jump-end: Animatsiya tugashi bilan oxirgi sakrash sodir bo'lishi uchun o'ngdan uzluksiz funksiyani bildiradi;
  
• 
  jump-none: Ikkala uchida ham sakrash yo'q. Buning o'rniga, 0% va 100% belgisida, har biri 1/n muddatda ushlab turing.
  
• 
  jump-both: 0% va 100% belgilarda pauzalarni o'z ichiga oladi, bu animatsiya iteratsiyasi davomida samarali qadam qo'shadi.
  
• 
  Start: jump-start bilan bir xil
  
• 
  end: jump-end bilan bir xil
  
• 
  step-start: steps(1, jump-start) ga teng
  
• 
  step-end: steps(1, jump-end) ga teng.
  

Animation