6-ma’ruza. Css3 asoslari. Effektlar, transformatsiya, animatsiya

Quyidagi misolda foydalanish mumkin bo'lgan turli tezlik egri chiziqlari ko'rsatilgan:

CSS transfor mxususiyati bilan siz quyidagi 3D o'zgartirish usullaridan foydalanishingiz mumkin:

• rotateX()
• rotateY()
• rotateZ()

Usul rotateX()elementni X o'qi atrofida ma'lum darajada aylantiradi:
Usul rotateY()elementni Y o'qi atrofida ma'lum darajada aylantiradi:
Usul rotateZ()elementni Z o'qi atrofida ma'lum darajada aylantiradi:

SVG ikki usulda jonlantirilishi mumkin:

• CSS animatsiyasi bilan
• SMIL animatsiyalari.

SVG-ni CSS yordamida animatsiya qilish oddiy animatsiyadan farq qilmaydi. Biz @keyframes dan animatsiya yaratish, undagi o'zgartiradigan xususiyatlarni tavsiflash va kerak bo'lganda foydalanish uchun ham foydalanamiz

c14.7,22.6-13.7,7.7-13.7-7.2c0,14.9-28.4,29.8-13.7,7.2c-14.7,22.6-9.3-9,2.6-15.2C9.5,41.6-13.4,19.2,10.4,24.6
c-23.8-5.3,7.9-10,15.3-2.2C18.3,14.6,32.5-14.1,32.5,8.5z">
begin="mouseover"
end="mouseout"
fill="freeze"
dur="2s"
to="M26.2,25C40.1-8.9,62.6-3.1,48.8,11.7C63.5,0.4,75.6,14,51.2,22.4c21.5-3.7,10.3,11.6-2.8,10.4c14.1,4.6,2.7,10.2-7.8,7.3 c11.8,4,0.6,9.1-10.5,6.6c1,4.8,2.6,18-12.4,4.9C8.3,51.3,4.7,35,9.3,27c-5.4-0.7-12.5-0.6-1.1-3.4c-15.4-4.9-5.9-4.8,2.1-3.2 C13.3,11.9,26.1,11.1,26.2,25z" />
dur="2s"
begin="mouseover"
end="mouseout"
fill="freeze"
values="#D2527F;#F9BF3B" />

Afzalliklari:

Afzalliklari:

• SMIL animatsiyasi SVG-ni img yorlig'i yoki CSS-ga fon tasviri orqali joylashtirishingiz kerak bo'lsa ham ishlaydi.
• SMIL animatsiyasidan foydalanib, siz CSS animatsiyasi uchun mavjud bo'lmagan atributlarni jonlantirishingiz mumkin. Masalan, bir shakldan ikkinchisiga silliq o'tish effektini yaratish uchun
  tegidagi nuqtalarni jonlantiring.

Kamchiliklari: Aslida, SMIL animatsiyasi o'ziga xos qoidalar va nozikliklarga ega bo'lgan alohida spetsifikatsiya bo'lib, uni CSS-dan alohida o'rganish kerak.

• Xususiyatlari: SMIL animatsiyasi juda ko'p nozikliklarga ega, ularni faqat ushbu turdagi animatsiya bilan yaqindan shug'ullanayotganingizni bilishingiz mumkin.

https://frontendresource.com/css-animation-examples/

E’tiboringiz uchun rahmat!