CSS prijelazi: opis, svojstva i značajke korištenja

Stvaranje dobre web stranice danas je jednostavno: dovoljno je stručnjaka, aktivno se odvijaju procesi poboljšanja funkcionalnosti i prezentacije (strukture i sadržaja). Potonji je dizajn sredstava CSS-a - kao najjednostavnije, ekonomično i učinkovito rješenje.

Borba između developera za kupca i vlasnika stranica za interes posjetitelja i prisustvo resursa preselila se u sferu tankog oglašavanja i mekog (toplog i dinamičnog) sadržaja.

CSS mjesto za skok

в псевдокласе :hover и обратно. Prema trenutnom mišljenju, mjesto CSS prijelaza u pseudo-klasi: hover i back. Postoji stil oznake, na primjer TagStyle, a postoji i TagStyle: hover stil. Zadatak pseudo-klase je smjestiti sadržaj svih pravila drugog opisa u prvi, čim miš pređe oznaku, i čim ona ode, sve se vrati natrag.

U takvoj shemi (u klasičnoj verziji) boje pozadine, boje teksta, okvir, njegove krivulje, uvlake i drugi vidljivi elementi obično se mijenjaju. позволяет это сделать плавно и управлять плавностью. Korištenje pravila CSS prijelaza omogućuje vam da to učinite glatko i kontrolirate glatkoću.

Pravilo može promijeniti mnoge druge elemente, ali se one obično koriste. CSS, можно найти на официальных ресурсах в интернете. Potpun popis pravila na koja utječe vlasništvo Transition CSS-a može se naći na službenim resursima na Internetu.

Sadržaj prijelaznog pravila

s включает в себя (transition='*'): Zadatak pravila: izvršiti glatki prijelaz drugih pravila iz jednog stanja u drugo, stoga CSS Transition s uključuje (transition = '*'):

• naziv imovine na koju se to odnosi (* -instvo);
• trajanje procesa (* - trajanje);
• prijelazna funkcija (* -timing funkcija);
• kašnjenje pokrenuti proces (* -određen).

Dopušteno je napisati kratko pravilo o CSS-u kanona:

• 1 s ease .5 s ; prijelaz: sve 1 s lakoćom .5 s ;

Prijelaz se odnosi na sva pravila, koja se izvode u jednoj sekundi u 'jednostavnom' stilu s pola sekunde odgode. Svejedno, napisano elementima pravila:

• * - vlasništvo: sve;
• * - trajanje: 1 s;
• * -timing funkcija: lakoća;
• * -odlaganje: .5s;

поддерживается основными браузерами, но никогда не помешает убедиться в этом и в наличии кроссбраузерности записанных правил. Tranzicijsko pravilo podržavaju glavni preglednici, ali nikada ne boli da se uvjeri u to i kompatibilnost pisanih pravila s drugim preglednicima.

Klasična aplikacija

: background: Najjednostavniji i najčešće korišten je prijelaz boje pozadine (simbola): CSS Transition : pozadina:

U ovom primjeru, samo pravilo prijelaza primijenit će se na pravilo pozadinske boje (trajanje od 2 sekunde, funkcija olakšavanja, kašnjenje 0,2 sekunde), a druga pravila će se odmah prebaciti u drugo stanje.

Prijelazna funkcija (stil)

- функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Važan dio pravila CSS prijelaza je tranzicijska funkcija, tj. Vremenska krivulja, kako napraviti prijelaz iz jednog stanja u drugo. Glatka opcija (easy) je zadana: prijelaz počinje polako, ubrzava se i usporava na kraju.

Vrijednost 'linearnog' određuje jedinstveni prijelaz: 'olakšavanje' - polako započinje prijelaz, zatim postupno ubrzava do kraja, a 'olakšava' - djeluje obrnuto.

Kubična-bezier funkcija (x1, y1, x2, y2) omogućuje vam da kreirate vlastitu opciju prijelaza, ali korištenje službenih resursa i mjesta s dobrim iskustvom pomoću Bezier-ove krivulje i dalje je poželjnije. Nešto novo što će se dogoditi sigurno neće uspjeti, a iskustvo zadovoljstva oku i psihologije posjetitelja opcija nagomilano je, ipak, značajno.

Konverzija se miješa s konverzijom

& Transform. Kombinacija pravila CSS Transition & Transform daje dobar učinak. Prvi određuje vrijeme procesa, drugo pokazuje što treba raditi sve ovo vrijeme.

Transformacije vam omogućuju pomicanje oznaka, njihovo rotiranje, promjenu veličine, promjenu položaja. Razmotrite kombinaciju:

• ( 180 deg ); transformacija: rotirati ( 180 stupnjeva );
  • 2 s ease-out .2 s ; prijelaz: sve 2 sekunde .2 s ;

Dvije sekunde će sadržaj oznake pretvoriti za 180 stupnjeva. Eksperimentiranje s funkcijama prevođenja, mjerenja, rotiranja, izvrtanja i njihovih varijacija, možete postići zanimljive efekte i dati vašem poslu jedinstvenu originalnost.

позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели. CSS3 također omogućuje transformaciju 3d, tj. Pomicanje oznake u xyz koordinatama, što u kombinaciji s CSS prijelazima omogućuje rotiranje tekstova i oblika prema potrebi za postizanje cilja.

Kompatibilan s prijelaznim pravilom

для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого. Ako je korištenje CSS prijelaza za pozadinu, obrub, boju i druga očigledno vizualna pravila normalno, prirodno i praktično, onda u nekim slučajevima, na primjer, pokušavajući kombinirati CSS prijelaz i prikaz, jednostavno možete potrošiti vrijeme i ne postići ono što želite.

Općenito govoreći, pri planiranju korištenja vizualnih efekata preporuča se razlikovati "vidljivo od izgleda". Napraviti lijepu rotaciju oblika ili teksta za određeno vrijeme je akcija koja ima malo veze s prikazom, vidljivošću, svojstvom z-indeksa. , то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое. Međutim, ako su posljednja dva jasno naznačena na popisu pravila na koja se odnosi prijelaz CSS - a, prvi se ne spominje, iako njegova uporaba uvodi nešto uočljivo, ali slabo kontrolirano, oznaci.

Prijelazno pravilo nije samo: lebdi i obrnuto, može se uspješno primijeniti i na druge pseudo-klase, na primjer: fokus ili: aktivno.

Općenito, Transition i Transform su CSS značajke koje, logično, nisu izravno povezane s njim (sve se radi o stilovima, a ne o algoritmima). No, tijekom proteklih nekoliko godina naglasci su se toliko promijenili da je ne koristiti bogati arsenal CSS-a i CSS3-a jednostavno nedostupan luksuz.

O abnormalnom i prirodnom

Na početku osobnih računala, kada je matematički procesor proizveden za matematičke izračune, bilo je nenormalno imati 386. računalo bez matematičkog koprocesora kada je došlo do učinkovitog korištenja Fortranovog programa za izračun putanje do Mjeseca. Naravno, danas se ne događa da bilo tko kupuje računalo pita ima li hardverski implementirana sredstva za matematičke izračune.

Bez ikakve sumnje, algoritam za izračun vremena prijelaza iz jednog stila u drugi ili rotacija oznake oko druge oznake ima vrlo mali odnos prema idejama o stilovima. Oznaka nije elektron za rotaciju u blizini atoma.

I CSS - po definiciji, tablica kaskadnih stilova i trenutaka nasljeđivanja, uzimajući u obzir mobilne uređaje, s prioritetima, kombinacijama.

Ali svijet se tako brzo mijenja. Danas drugačiju formulu ne možete nazvati matematikom, jer se pojam broja u suvremenom programskom jeziku ne razlikuje mnogo od koncepta niza.

Ali ako svima odgovara, ako je prikladan i djelotvoran, onda možda ima smisla mijenjati vlastite ideje. & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Očigledno je da će CSS Transition & Transform napraviti tako malu revoluciju: nema potrebe programirati nešto što je više ne treba. Programeri već duže vrijeme pate od bolesti struke koja se razlikuje ovako: prepisati ne samo ono što su drugi učinili prije njih za sljedeći zadatak, već i ono što su i sami učinili jučer. Što učiniti, svijet i tehnologije su promjenjivi, pa čak i male metamorfoze u području primjene ponekad dovode do potrebe za značajnim promjenama kodova.

Ipak, takva transformacija matematičkih algoritama u lijepe i praktične CSS pravila vrlo je praktična i učinkovita.