CSS 3 va animatsiya

Salom. Kimda-kim sayt qilgan bo’lsa CSS bilan albatta ishlagan. Ancha yillar oldin HTML4 va CSS2 yetarli edi. Lekin vaqt shuni ko’rsatdiki HTML4 va CSS2 lar ham ayrim narsalar yetishmaskan. Kelin CSS3 dagi animatsiyalar haqida.

Ochig’i ushbu maqolani yozguncha o’zim ham o’rgandim :). Avvalo oddiy bitta HTML va CSS fayl yaratamiz. Kodni Firefox da tekshiring yoki CSS3 ni qo’llaydigan hohlagan browserda.

HTML fayl (smile.html)

CSS fayl (smile.css)

body {
	background: #aaa;
}

.c-smile {
	width: 300px;
	height: 300px;
	background: #ffff00;
	position: absolute;
	top: 100px;
	left: 100px;
	border-radius: 150px;
}

.eye-left, .eye-right {
	position: absolute;
	top: 70px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #fff;
}

.eye-left {
	left: 60px;
}

.eye-right {
	right: 60px;
}

.eye-left div, .eye-right div {
	position: absolute;
	background: #333;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	top: 15px;
	left: 0px;
}

.nose {
	position: absolute;
	top: 110px;
	left: 125px;
	width: 50px;
	height: 80px;
	background: #333;
	border-radius: 40px;
}

.l {
	position: absolute;
	width: 100px;
	height: 100px;
	background: #aa0000;
	bottom: 5px;
	left: 100px;
	border-radius: 50px;
	transform: scale(1, 0.75);
}

Agar shu holatida ko’rsangiz quyidagi holat chiqadi.

Endi shu smile ga harakat beramiz. Buning uchun CSS fayl davomiga quyidagini qo’shing.

@keyframes eye
{
	0% {
		left: 0px;
	}
	50% {
		left: 30px;
	}
	100% {
		left: 0px;
	}
}

@keyframes l
{
	0% {
		transform: scale(1, 0.75);
	}
	100% {
		transform: scale(1, 0.3);
	}
}

.l,
.eye-right div,
.eye-left div {
	animation-name: eye;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
}

.l {
	animation-name: l;
	animation-duration: 1s;
}

Shunda keyin ochsangiz smile ko’zi harakatlanib og’zi bilan nimadir gapirmoqchi bo’ladi :).
Ko’rish

Keling endi nimalar ishlatilganligi haqida.
@keyframes — bu animatsiya ketma-ketligidagi o’zgarishlarni aniqlaydi. Ya’ni ko’rsatilgan vaqt davomida obyektning qaysi holatda ekanligini ko’rsatadi. Umuman animatsiyaning skeleti yasaladi.

Bizni misolda:
0% = dastlabki holatda left: 0px bo’lsin
50% = to’liq harakatning yarmiga kelganda left: 50px bo’lsin
100% = animatsiyaning oxirida yana left: 0px bo’lsin. Bu ko’z harakatining borib yana qaytib kelishini ta’minlaydi.

Agar shu @keyframes ning ichiga background, top,… kabilarni yozsangiz shu husisiyatlar ham animatsiyaga mos holda o’zgaradi.

Endi animatsiya hususiyati
animation-name: — yuklanishi kerak bo’lsa @keyframe nomi.

animation-duration: — animatsiya to’liq vaqti. Sekundda ko’rsatiladi. Agar 10s bo’lsa ko’z sekin harakatlanadi. Ya’ni 10s ichida ko’z chapdan o’ngga va o’ngdan chapga o’tadi.

animation-timing-function: — animatsiya harakati funksiyasi. ease, linear, ease-in, ease-out, ease-in-out va cubic-bezier ([son], [son], [son], [son]) qiyatlarini qabul qiladi. Umuman Beze-3 funksiyasi bo’yicha aniqlanadi.

animation-delay: — animatsiyani boshlashni kutish vaqti sekundlarda;
animation-iteration-count: — animatsiyani takrorlashlar soni. Agar 2 ko’rsatilsa 2 marta borib keladi va to’xtaydi.

animation-direction: — animatsiya harakati. Bu ikkita normal va alternate qiymatini oladi. Agar alternate ni bersangiz @keyframes ni quyidagicha o’zgartirish mumkin.

@keyframes eye
{
	0% {
		left: 0px;
	}
	100% {
		left: 30px;
	}
}

@keyframes l
{
	0% {
		transform: scale(1, 0.75);
	}
	100% {
		transform: scale(1, 0.3);
	}
}

Yani animatsiya to’g’riga va teskariga amalga oshiriladi. Shu holatda normal qo’ysangiz. Faqat chapdan o’ngga qarab harakatlarni ko’zlar.

animation-play-state: — animatsiya holati. running — ishlab turibdi. paused — to’xtagan.

Ha yana chrome va safari uchun animation o’rniga -webkit-animation, @keyframes o’rniga @-webkit-keyframes yoziladi. Ikkalasini ham bir vaqtda qo’llash mumkin.

Bu CSS3 haqidagi birinchi maqola edi. Nasib qilsa hali ko’p narsalarni ko’ramiz.
Fikrlar bo’lsa kutib qolamiz.