Animațiile dintr-o pagină web pot atrage mai mulți utilizatori. Întrebați-vă acest lucru - dacă ați vedea o pagină web care are destul de puțină animație, nu ați dori să explorați mai mult? Acum, cu tranzițiile CSS, vă puteți face munca să prindă viață cu niște animații grozave. Și, atenție, acestea trebuie făcute corect. Să explorăm lumea tranzițiilor CSS în următoarea ordine:
- De ce tranziții CSS?
- Proprietatea de tranziție
- Ce trebuie să specificați?
- Proprietatea funcției funcției de temporizare-tranziție
- Proprietatea de tranziție-întârziere
De ce tranziții CSS?
Să luăm un exemplu. Dacă ați schimba culoarea unui element din alb în albastru, această schimbare este aproape instantanee. Pentru un efect mai animat, puteți face această schimbare treptată. Acest lucru pare destul de atrăgător din punct de vedere vizual. Activând tranzițiile CSS, puteți personaliza modul în care apar modificările. Puteți defini modul în care apar modificările elementelor la intervale de timp specifice care urmează o curbă de accelerație.
Tranzițiile CSS vă permit să definiți modificările pentru elemente, intervalele de timp specifice, viteza curbei de accelerație și multe altele. Puteți face toate acestea fără a utiliza Flash sau JavaScript .
Pentru o mai bună înțelegere, puteți consulta imaginea de mai jos:
În imaginea de mai sus, elementul HTML se va schimba de la roșu la albastru într-o chestiune de o secundă. Veți vedea, de asemenea, culoarea intermediară atunci când are loc tranziția. Dacă nu veți utiliza tranziții CSS, veți observa că schimbarea culorii de la roșu la albastru este instantanee - nu veți vedea culoarea intermediară. Cu tranzițiile CSS, veți observa un efect animat atunci când elementele HTML se schimbă de la starea veche la cea nouă.
care sunt constrângerile în sql
Proprietatea de tranziție
Puteți utiliza proprietatea de tranziție stenogramă pentru a controla tranzițiile CSS. Utilizarea acestei stenografii nu este doar ușoară, dar poate evita, de asemenea, parametrii care nu sunt sincronizați, care pot fi destul de frustranti pentru depanare în CSS.
Proprietatea de tranziție specifică proprietățile CSS la care doriți efectul de tranziție. Doar aceste proprietăți CSS sunt animate.
Sintaxă:
tranziție:
Ca începător, s-ar putea să vă confruntați cu unele dificultăți în utilizarea stenograma. Dacă credeți că utilizarea stenogramei este puțin complexă pentru dvs. acum, puteți specifica proprietățile de tranziție separat. Pentru un element HTML, puteți specifica proprietățile de tranziție una câte una așa cum se arată în exemplul de mai jos:
div {width: 100px height: 100px background: lightblue transition-property: width transition-duration: 2s transition-timing-function: linear transition-delay: 1s} div: hover {width: 300px}Plasați cursorul peste cutie
În exemplul de mai sus, am specificat proprietățile (tranziție-proprietate, tranziție-durată, tranziție-temporizare-funcție și tranziție-întârziere) și valorile lor separat. Vom afla despre aceste proprietăți de tranziție în curând.
Ce trebuie să specificați?
Există în primul rând două lucruri pe care trebuie să le specificați pentru a crea tranziții CSS: proprietatea CSS care dorește să adauge un efect și durata de timp a efectului respectiv.Trebuie să țineți cont de un lucru - atunci când nu specificați durata, tranziția va avea valoarea implicită de 0 și nu va exista niciun efect.
Să luăm în considerare un exemplu:
Codul de mai jos definește un efect de tranziție al proprietății de lățime pentru o durată de cinci secunde.
div {lățime: 100px înălțime: 100px fundal: albastru tranziție: lățime 5s} div: hover {lățime: 600px}Deplasați cursorul peste elementul div de mai sus, pentru a vedea efectul de tranziție.
În codul de mai sus, veți vedea că atunci când plasați cursorul peste caseta albastră, caseta albastră își mărește lățimea treptat pentru o durată de timp de cinci secunde. De asemenea, veți observa că atunci când scoateți cursorul din caseta albastră, caseta albastră va reveni la dimensiunea inițială treptat (nu instantaneu). De asemenea, puteți modifica valorile pentru lățime și durata timpului pentru a vedea cum afectează această proprietate de tranziție elementul HTML.
De asemenea, puteți adăuga efectul de tranziție la mai multe proprietăți. Puteți face acest lucru utilizând virgule pentru a separa proprietățile. Să luăm în considerare un exemplu:
În codul de mai jos, proprietatea de tranziție este specificată pentru lățime, înălțime și transformare.
div {umplere: 15px lățime: 150px înălțime: 100px fundal: verde tranziție: lățime 2s, înălțime 2s, transformă 2s} div: hover {lățime: 300px înălțime: 200px transform: rotire (360deg)} Salut Lume (Plasați-vă peste mine)
Cu exemplul de mai sus, veți vedea cum se mișcă caseta verde când treceți deasupra casetei.
Am specificat numai proprietatea și durata timpului. Să vedem ceilalți parametri cu diverse exemple.
cum să ridici la o putere în Java
Proprietatea funcției funcției de temporizare-tranziție
Această proprietate definește curba de viteză pentru efectul de tranziție. Poate lua următoarele valori:
convertiți șirul în matricea php
- Valoare ușurință: Aceasta este valoarea implicită în care efectul este lent la început, apoi mai rapid și se termină încet.
- Valoare liniară: Acest efect nu variază viteza tranziției - menține viteza constantă de la început până la sfârșit.
- Valoare de ușurință: Acest efect începe încet.
- Valoare de eliminare: Acest efect are un final lent.
- Valoare ușurință-intrare: Acest efect are un început lent, precum și un sfârșit lent.
- Valoare cub-bezier (n, n, n, n): Puteți specifica propriul set de valori în funcția cubic-bezier.
Codul de mai jos prezintă efectele de tranziție pentru valori liniare, ușoare, ușoare, ușoare și ușoare.
div {width: 100px height: 100px background: pink transition: width 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: ușurință} # div3 {transition-timing-function: ușurință-în } # div4 {transition-timing-function: ușurință-ieșire} # div5 {transition-timing-function: ușurință-în-ieșire} div: hover {width: 300px}Plasați cursorul peste elementele div de mai jos
liniar
uşura
ușurință
relaxare
ușurință-în-ieșire
Proprietatea de tranziție-întârziere
Uneori, doriți ca o animație să apară după o anumită durată de timp. Proprietatea de întârziere a tranziției vă permite să specificați întârzierea pentru un efect de tranziție. Puteți specifica întârzierea în câteva secunde.
Să luăm un exemplu pentru a vedea întârzierea efectului de tranziție:
div {width: 100px height: 100px background: yellow transition: width 3s transition-delay: 1s} div: hover {width: 300px}Plasați cursorul pe elementul div de mai jos
Notă: Puteți observa această întârziere cu 1 secundă înainte de începerea efectului
În codul de mai sus, când plasați cursorul peste caseta galbenă, veți observa (timp de o secundă) că nu există niciun efect. După o așteptare de o secundă, veți observa efectul.
Cu aceasta, ajungem la sfârșitul acestui articol CSS Transitions. Puteți adăuga animații la paginile dvs. web acum. Încercați aceste exemple.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să menționați acest lucru în secțiunea de comentarii a blogului „CSS Transition” și vă vom răspunde.