CSS o'zgaruvchilari va animatsiya - HTML va CSS

Bu bo'limda CSS ni boshqariladigan va jonli qiladigan ikki imkoniyatni o'rganamiz.

CSS o'zgaruvchilari #

CSS

:root {
    --asosiy-rang: #2563eb;
    --matn-rang: #334155;
    --chegara: #e2e8f0;
    --radius: 12px;
    --masofa: 1rem;
}

.tugma {
    background: var(--asosiy-rang);
    border-radius: var(--radius);
    padding: var(--masofa);
}

Nima uchun o'zgaruvchilar?

Saytning asosiy rangini o'zgartirish kerak bo'lsa:

O'zgaruvchisiz: 47 ta joyda #2563eb ni qidirib almashtirish
O'zgaruvchi bilan: :root da bitta qatorni o'zgartirish

Va eng muhimi - ular JavaScript orqali o'zgartirilishi mumkin.

Standart qiymat #

CSS

.karta {
    /* Agar --karta-fon aniqlanmagan bo'lsa, oq ishlatiladi */
    background: var(--karta-fon, #ffffff);
}

Meros va qayta aniqlash #

CSS

:root {
    --tugma-fon: #2563eb;
}

.tugma {
    background: var(--tugma-fon);
}

/* Faqat shu blok ichidagi tugmalar boshqa rangda */
.ogohlantirish {
    --tugma-fon: #dc2626;
}

.ogohlantirish ichidagi barcha .tugma avtomatik qizil bo'ladi - alohida klass yozish shart emas.

Qorong'i rejim #

O'zgaruvchilarning eng chiroyli qo'llanishi:

CSS

:root {
    --fon: #ffffff;
    --matn: #334155;
    --sarlavha: #0f172a;
    --chegara: #e2e8f0;
    --karta: #f8fafc;
}

[data-mavzu="qorongi"] {
    --fon: #0f172a;
    --matn: #cbd5e1;
    --sarlavha: #f1f5f9;
    --chegara: #1e293b;
    --karta: #1e293b;
}

body {
    background: var(--fon);
    color: var(--matn);
    transition: background 0.25s, color 0.25s;
}

.karta {
    background: var(--karta);
    border: 1px solid var(--chegara);
}

JavaScript

const tugma = document.querySelector(".mavzu-tugma");

tugma.addEventListener("click", () => {
    const joriy = document.documentElement.dataset.mavzu;
    const yangi = joriy === "qorongi" ? "yorug" : "qorongi";
    document.documentElement.dataset.mavzu = yangi;
    localStorage.setItem("mavzu", yangi);
});

// Sahifa ochilganda saqlangan tanlovni tiklash
const saqlangan = localStorage.getItem("mavzu");
if (saqlangan) {
    document.documentElement.dataset.mavzu = saqlangan;
}

Tizim sozlamasiga moslashish:

CSS

@media (prefers-color-scheme: dark) {
    :root:not([data-mavzu="yorug"]) {
        --fon: #0f172a;
        --matn: #cbd5e1;
        --sarlavha: #f1f5f9;
        --chegara: #1e293b;
        --karta: #1e293b;
    }
}

Nima uchun :not([data-mavzu="yorug"])?

Foydalanuvchi tizimda qorong'i rejimni yoqqan, lekin sizning saytingizda yorug' rejimni tanlagan bo'lishi mumkin. Bu selektor uning tanlovini tizim sozlamasidan ustun qo'yadi.

`transition` - silliq o'tish #

CSS

.tugma {
    background: #2563eb;
    transform: translateY(0);
    transition: background 0.2s ease, transform 0.2s ease;
}

.tugma:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

CSS

/* To'liq sintaksis */
transition: xossa davomiylik funksiya kechikish;
transition: opacity 0.3s ease-in-out 0.1s;

/* Bir nechta xossa */
transition: opacity 0.3s, transform 0.3s;

/* Hammasi (tavsiya etilmaydi) */
transition: all 0.3s;

Funksiya	Xatti-harakati
`linear`	Bir tekis
`ease`	Sekin - tez - sekin (standart)
`ease-in`	Sekin boshlanadi
`ease-out`	Sekin tugaydi - eng tabiiy
`cubic-bezier(...)`	O'z egri chizig'ingiz

transition: all dan qoching

all brauzerni har bir xossani kuzatishga majbur qiladi - bu sekinlashtiradi va kutilmagan animatsiyalarga olib keladi. Har doim aniq xossalarni sanang.

Faqat ikkita xossani animatsiya qiling

Brauzer uchun eng arzon animatsiyalar - transform va opacity. Ular GPU da bajariladi va 60 kadr/sekund beradi.

width, height, top, margin, padding esa sahifani qayta hisoblashga majbur qiladi va uzilishlarga olib keladi.

CSS

/* Sekin */
.yomon { transition: width 0.3s; }
.yomon:hover { width: 300px; }

/* Tez */
.yaxshi { transition: transform 0.3s; }
.yaxshi:hover { transform: scaleX(1.2); }

`transform` #

CSS

.element {
    transform: translateX(20px);
    transform: translateY(-10px);
    transform: translate(20px, -10px);

    transform: scale(1.1);
    transform: scaleX(1.5);

    transform: rotate(45deg);

    transform: skew(10deg, 5deg);

    /* Bir nechtasi birga - tartib muhim! */
    transform: translateY(-4px) scale(1.03) rotate(2deg);

    /* Aylanish markazi */
    transform-origin: center;
    transform-origin: top left;
}

Kulrang punktir - elementning asl joyi

`@keyframes` animatsiyalari #

CSS

@keyframes paydo-bol {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.karta {
    animation: paydo-bol 0.5s ease-out;
}

CSS

/* Bir nechta bosqich */
@keyframes sakrash {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

/* To'liq sintaksis */
.element {
    animation-name: sakrash;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.2s;
    animation-iteration-count: infinite;    /* yoki son */
    animation-direction: alternate;
    animation-fill-mode: forwards;         /* oxirgi holatda qoladi */

    /* Qisqa yozuv */
    animation: sakrash 1s ease-in-out 0.2s infinite alternate forwards;
}

Foydali animatsiyalar #

CSS

/* Yuklanish aylanasi */
@keyframes aylanish {
    to { transform: rotate(360deg); }
}

.yuklovchi {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: aylanish 0.8s linear infinite;
}

/* Skelet (yuklanayotgan mazmun) */
@keyframes yaltirash {
    to { background-position: -200% 0; }
}

.skelet {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: yaltirash 1.4s linear infinite;
    border-radius: 6px;
    height: 1rem;
}

/* Pulsatsiya */
@keyframes puls {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.85; }
}

.bildirishnoma {
    animation: puls 2s ease-in-out infinite;
}

/* Ketma-ket paydo bo'lish */
.royxat li {
    opacity: 0;
    animation: paydo-bol 0.4s ease-out forwards;
}

.royxat li:nth-child(1) { animation-delay: 0.05s; }
.royxat li:nth-child(2) { animation-delay: 0.10s; }
.royxat li:nth-child(3) { animation-delay: 0.15s; }
.royxat li:nth-child(4) { animation-delay: 0.20s; }

Kirish imkoniyati #

prefers-reduced-motion ni hurmat qiling

Ba'zi odamlarda animatsiya bosh aylanishi va ko'ngil aynishi keltirib chiqaradi (vestibulyar buzilishlar). Ular operatsion tizimda "harakatni kamaytirish" sozlamasini yoqadi.

Har bir loyihada shu blok bo'lishi kerak:

CSS

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

Bu kamdan-kam eslanadi, lekin haqiqiy odamlarga ta'sir qiladi.

Soyalar #

CSS

.karta {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.karta:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

/* Bir nechta soya - chuqurroq effekt */
.modal {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.10),
        0 24px 48px rgba(15, 23, 42, 0.08);
}

/* Ichki soya */
input:focus {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05),
                0 0 0 3px rgba(37, 99, 235, 0.15);
}

Amaliy misol: interaktiv kartochka #

CSS

:root {
    --asosiy: #2563eb;
    --asosiy-toq: #1d4ed8;
    --fon: #ffffff;
    --chegara: #e2e8f0;
    --matn: #334155;
    --sarlavha: #0f172a;

    --radius: 14px;
    --soya: 0 1px 3px rgba(15, 23, 42, 0.08);
    --soya-katta: 0 12px 28px rgba(15, 23, 42, 0.12);
    --tezlik: 0.22s;
}

[data-mavzu="qorongi"] {
    --fon: #1e293b;
    --chegara: #334155;
    --matn: #cbd5e1;
    --sarlavha: #f1f5f9;
    --soya: 0 1px 3px rgba(0, 0, 0, 0.3);
    --soya-katta: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.karta {
    background: var(--fon);
    border: 1px solid var(--chegara);
    border-radius: var(--radius);
    box-shadow: var(--soya);
    overflow: hidden;

    transform: translateY(0);
    transition:
        transform var(--tezlik) ease-out,
        box-shadow var(--tezlik) ease-out,
        border-color var(--tezlik) ease-out;
}

.karta:hover {
    transform: translateY(-4px);
    box-shadow: var(--soya-katta);
    border-color: var(--asosiy);
}

.karta__rasm {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

.karta:hover .karta__rasm {
    transform: scale(1.05);
}

.karta__tugma {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    background: var(--asosiy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tezlik), transform 0.1s;
}

.karta__tugma:hover  { background: var(--asosiy-toq); }
.karta__tugma:active { transform: translateY(1px); }

.karta__tugma:focus-visible {
    outline: 2px solid var(--asosiy);
    outline-offset: 3px;
}

/* Strelka - hover da siljiydi */
.karta__tugma::after {
    content: "\2192";
    transition: transform var(--tezlik);
}

.karta__tugma:hover::after {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Yaxshi animatsiya sezilmaydi

Amaliy qoidalar:

Davomiylik: 150-300ms. Uzunroq bo'lsa sekin tuyuladi.
Funksiya: ease-out - tabiiy harakat.
Masofa: kichik (2-6px). Katta sakrashlar bezovta qiladi.
Faqat transform va opacity ni animatsiya qiling.
Sahifa yuklanganda hamma narsa harakatlanmasin.

Amaliy topshiriq

:root da 10 ta o'zgaruvchi aniqlang: ranglar, radius, masofa, tezlik.
Qorong'i rejim qo'shing va tugma bilan almashtiring (localStorage da saqlang).
Kartochkaga hover effekti bering: ko'tarilish + soya + rasm kattalashuvi.
Yuklanish aylanasini @keyframes bilan yarating.
Skelet yuklovchi (shimmer) effektini qiling.
Ro'yxat elementlarini animation-delay bilan ketma-ket paydo qiling.
prefers-reduced-motion blokini qo'shing va OS sozlamasida sinab ko'ring.
transition: width va transition: transform ni taqqoslang - DevTools Performance bo'limida farqni ko'ring.

Xulosa #

CSS o'zgaruvchilari :root da aniqlanadi va var() bilan ishlatiladi.
Ular meros bo'ladi va istalgan blokda qayta aniqlanishi mumkin.
Qorong'i rejim - o'zgaruvchilarning eng amaliy qo'llanishi.
transition holatlar orasidagi o'tishni silliq qiladi.
Faqat transform va opacity ni animatsiya qiling - ular GPU da ishlaydi.
@keyframes murakkab, ko'p bosqichli animatsiyalar uchun.
prefers-reduced-motion ni hurmat qilish - kirish imkoniyati talabi.
Yaxshi animatsiya qisqa (150-300ms) va sezilmas bo'ladi.

Keyingi bo'limda zamonaviy CSS imkoniyatlarini ko'rib chiqamiz.