Com implementar la transició CSS: les animacions s'han fet correctament



Aquest article us proporcionarà un coneixement detallat i exhaustiu de les transicions CSS i de com podeu afegir-hi animacions.

Les animacions d’una pàgina web poden atraure més usuaris. Pregunteu-vos això mateix: si veieu una pàgina web que tingui força animació, no voldríeu explorar-ne més? Ara, amb les transicions CSS, podeu fer que el vostre treball cobri vida amb algunes animacions fantàstiques. I, atenció, cal fer-ho bé. Explorem el món de les transicions CSS en l’ordre següent:

Per què CSS Transitions?

Prenguem una instància. Si canvieu el color d'un element del blanc al blau, aquest canvi és gairebé instantani. Per obtenir un efecte més animat, podeu fer que aquest canvi passi gradualment. També sembla atractiu visualment. En habilitar les transicions CSS, podeu personalitzar la manera com es produeixen els canvis. Podeu definir com es produeixen els canvis en els elements a intervals de temps específics que segueixen una corba d'acceleració.





Les transicions CSS us permeten definir els canvis per a elements, els intervals de temps específics, la velocitat de la corba d’acceleració i molt més. Podeu fer tot això sense utilitzar Flash o JavaScript .

Per a una millor comprensió, podeu consultar la imatge següent:



Transició CSSA la imatge superior, l'element HTML canviarà de vermell a blau en qüestió d'un segon. També veureu el color intermedi quan s'està produint la transició. Si no feu servir transicions CSS, notareu que el canvi de color del vermell al blau és instantani; no veureu el color intermedi. Amb les transicions CSS, notareu un efecte animat quan els elements HTML canvien de l'estat antic al nou.

exemple de invocació de mètode remot java

La propietat de transició

Podeu utilitzar la propietat de transició abreujada per controlar les transicions CSS. L'ús d'aquesta taquigrafia no només és fàcil, sinó que també pot evitar paràmetres fora de sincronització que poden ser molt frustrants per depurar-los a CSS.

La propietat de transició especifica les propietats CSS a les quals voleu l'efecte de transició. Només aquestes propietats CSS estan animades.



Sintaxi:

transició:

Com a principiant, és possible que tingueu dificultats per fer servir la taquigrafia. Si creieu que fer servir la taquigrafia és ara mateix una mica complex, podeu especificar les propietats de transició per separat. Per a un element HTML, podeu especificar les propietats de transició una per una tal com es mostra a l'exemple següent:

div {width: 100px height: 100px background: lightblue transition-property: width transition-duration: 2s transition-timing-function: linear transition-delay: 1s} div: hover {width: 300px}

Passeu el cursor per sobre de la caixa

A l'exemple anterior, hem especificat les propietats (propietat de transició, durada de transició, funció de temporització de transició i retard de transició) i els seus valors per separat. Aviat coneixerem aquestes propietats de transició.

Què cal especificar?

Hi ha dues coses que heu d’especificar principalment per crear transicions CSS: la propietat CSS a la qual voleu afegir un efecte i la durada del temps d’aquest efecte.Cal tenir en compte una cosa: quan no especifiqueu la durada del temps, la transició tindrà un valor predeterminat de 0 , i no hi haurà cap efecte.

Vegem un exemple:

El codi següent defineix un efecte de transició de la propietat amplada durant una durada de cinc segons.

div {width: 100px height: 100px background: blue transition: width 5s} div: hover {width: 600px}

Passeu el cursor per sobre de l’element div per veure l’efecte de transició.

Al codi anterior, veureu que quan passeu el cursor per sobre del quadre blau, el quadre blau augmenta l’amplada gradualment durant una durada de cinc segons. També notareu que quan traieu el cursor del quadre blau, el quadre blau tornarà a la mida original de forma gradual (no instantània). També podeu canviar els valors de l'amplada i la durada del temps per veure com afecta aquesta propietat de transició a l'element HTML.

També podeu afegir l’efecte de transició a més d’una propietat. Podeu fer-ho mitjançant comes per separar les propietats. Vegem un exemple:

Al codi següent, la propietat de transició s'especifica per a l'amplada, l'alçada i la transformació.

div {farciment: 15 px d'amplada: 150 px d'alçada: 100 px de fons: transició verda: amplada 2 s, alçada 2 s, transforma 2 s} div: passeu per sobre {ample: 300 px d'alçada: 200 px transforma: gira (360 graus)} Hola món 

(Passa el curs per sobre de mi)

Amb l'exemple anterior, veureu com es mou el quadre verd quan passeu el cursor per sobre del quadre.

Hem especificat només la durada i la propietat. Vegem els altres paràmetres amb diversos exemples.

suma de dígits d’un número a Java que utilitza el bucle for

La propietat de la funció Transition-timing-function

Aquesta propietat defineix la corba de velocitat de l'efecte de transició. Pot adoptar els valors següents:

què és un desenvolupador de blockchain
  • Valor de facilitat: Aquest és el valor per defecte on l'efecte és lent al principi, després més ràpid i finalitza lentament.
  • Valor lineal: Aquest efecte no varia la velocitat de la transició; manté la velocitat constant des del principi fins al final.
  • Valor de facilitat: Aquest efecte comença lentament.
  • Valor de reducció: Aquest efecte té un final lent.
  • Valor de facilitat d'entrada: Aquest efecte té un començament lent i un final lent.
  • Valor cúbic-bezier (n, n, n, n): Podeu especificar el vostre propi conjunt de valors a la funció cubic-bezier.

El codi següent mostra els efectes de transició per als valors lineals, facilitat, facilitat d’entrada, facilitat i facilitat d’entrada.

div {width: 100px height: 100px background: pink transition: width 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: ease} # div3 {transition-timing-function: ease-in } # div4 {transition-timing-function: ease-out} # div5 {transition-timing-function: ease-in-out} div: hover {width: 300px}

Passeu el cursor per sobre dels elements div següents

lineal
facilitat
facilitat
tranquil·litat
facilitat d’entrada-sortida

La propietat de retard de transició

De vegades, voleu que es produeixi una animació després d’un temps determinat. La propietat de retard de transició us permet especificar el retard per a un efecte de transició. Podeu especificar el retard en segons.

Prenem un exemple per veure el retard en l'efecte de transició:

div {width: 100px height: 100px background: yellow transition: width 3s transition-delay: 1s} div: hover {width: 300px}

Passeu el cursor per sobre de l’element div següent

Nota: Podeu observar aquest retard d’1 segon abans que comenci l’efecte

Al codi anterior, quan passeu el cursor per sobre del quadre groc, notareu (durant un segon) que no hi ha cap efecte. Després d’una espera d’un segon, notareu l’efecte.

Amb això, arribem al final d’aquest article de CSS Transitions. Ara podeu afegir animacions a les vostres pàgines web. Proveu aquests exemples.

Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris del bloc 'Transició CSS' i us respondrem.