Transizioni CSS: descrizione, proprietà e caratteristiche di utilizzo

Creare un buon sito web oggi è semplice: ci sono abbastanza specialisti, i processi per migliorare la funzionalità e la sua presentazione (struttura e contenuto) stanno andando attivamente. Quest'ultima è la progettazione dei mezzi di CSS - come la soluzione più semplice, economica ed efficiente.

La lotta tra sviluppatori per il cliente e proprietari di siti per l'interesse dei visitatori e la presenza di risorse si è spostata nella sfera della pubblicità sottile e dei contenuti soft (caldi e dinamici).

CSS Jump Place

в псевдокласе :hover и обратно. Secondo l'opinione corrente, il posto delle transizioni CSS nella pseudo-classe: hover e back. C'è uno stile di tag, ad esempio TagStyle, e c'è uno stile TagStyle: hover. Il compito della pseudo-classe è di posizionare il contenuto di tutte le regole della seconda descrizione nel primo, non appena il mouse si trova sopra il tag e, non appena se ne va, restituire tutto indietro.

In tale schema (nella versione classica), i colori di sfondo, i colori del testo, la cornice, le sue curvature, i rientri e altri elementi visibili di solito cambiavano. позволяет это сделать плавно и управлять плавностью. L'utilizzo della regola Transizioni CSS ti consente di farlo senza problemi e di controllare la scorrevolezza.

Una regola può cambiare molti altri elementi, ma quelli indicati sono solitamente usati. CSS, можно найти на официальных ресурсах в интернете. Un elenco completo di regole che sono interessate dalla proprietà Transition CSS può essere trovato su risorse ufficiali su Internet.

Contenuto della regola di transizione

s включает в себя (transition='*'): Il compito della regola: eseguire una transizione graduale di altre regole da uno stato a un altro, quindi la transizione CSS include (transizione = '*'):

• nome della proprietà interessata (* -property);
• durata del processo (* -duration);
• funzione di transizione (* -timing-function);
• ritardo avviare il processo (* -delay).

Autorizzato a scrivere una breve regola sui canoni del CSS:

• 1 s ease .5 s ; transizione: tutti 1 s facilità .5 s ;

La transizione si applica a tutte le regole, eseguite in un secondo in uno stile "easy" con un ritardo di mezzo secondo. Lo stesso, scritto da elementi di regola:

• * -proprietà: tutti;
• * -durata: 1s;
• * -timer-funzione: facilità;
• * -delay: .5s;

поддерживается основными браузерами, но никогда не помешает убедиться в этом и в наличии кроссбраузерности записанных правил. La regola di transizione è supportata dai principali browser, ma non fa mai male accertarsi di questo e della compatibilità cross-browser delle regole scritte.

Applicazione classica

: background: Il più semplice e più frequentemente utilizzato è la transizione del colore di sfondo (simbolo): Transizione CSS : background:

In questo esempio, solo la regola di transizione verrà applicata alla regola del colore di sfondo (durata 2 secondi, la funzione di disattivazione, ritardo di 0,2 secondi) e le altre regole passeranno immediatamente a un altro stato.

Funzione di transizione (stile)

- функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Una parte importante della regola Transizioni CSS è la funzione di transizione, ovvero la curva temporale, come eseguire la transizione da uno stato a un altro. L'opzione liscia (facile) è l'impostazione predefinita: la transizione inizia lentamente, accelera e rallenta alla fine.

Il valore di "lineare" determina la transizione uniforme: "easy-in" - avvia lentamente la transizione, poi gradualmente accelera fino alla fine e "easy-out" - agisce viceversa.

La funzione cubico-bezier (x1, y1, x2, y2) consente di creare un'opzione di transizione personalizzata, ma è comunque preferibile utilizzare risorse ufficiali e siti con una buona esperienza nell'utilizzo della curva di Bezier. Qualcosa di nuovo da inventare sicuramente non funzionerà, ma l'esperienza di piacere per gli occhi e la psicologia del visitatore delle opzioni è stata accumulata, tuttavia, considerevole.

La conversione si fonde con la conversione

& Transform. La combinazione delle regole CSS Transition & Transform dà un buon effetto. Il primo determina il tempo del processo, il secondo mostra cosa fare tutto questo tempo.

Le trasformazioni ti consentono di spostare i tag, ruotarli, ridimensionarli, cambiare posizione. Considera la combinazione:

• ( 180 deg ); trasformare: ruotare ( 180 gradi );
  • 2 s ease-out .2 s ; transizione: tutti i 2 s disinvoltura .2 s ;

Per due secondi, ruoterà i contenuti del tag di 180 gradi. Sperimentando con le funzioni di tradurre, ridimensionare, ruotare, inclinare e le loro variazioni, puoi ottenere effetti interessanti e dare al tuo lavoro un'originalità unica.

позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели. Il CSS3 ti consente anche di trasformare 3d, cioè di spostare il tag in coordinate xyz, che, in combinazione con CSS Transitions, ti permette di ruotare testi e forme secondo necessità per raggiungere l'obiettivo.

Compatibile con la regola di transizione

для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого. Se si usano le transizioni CSS per lo sfondo, il bordo, il colore e altre regole visive ovviamente è normale, naturale e conveniente, quindi per alcuni casi, ad esempio, cercando di combinare la transizione e la visualizzazione CSS , è sufficiente passare il tempo e non ottenere ciò che si desidera.

In generale, quando si pianifica l'uso di effetti visivi, si raccomanda di distinguere "visibile dal layout". Per fare una bella rotazione di una forma o di un testo per un certo tempo - un'azione che ha poco a che fare con il display, la visibilità, la proprietà z-index. , то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое. Tuttavia, se gli ultimi due sono chiaramente enunciati nella lista delle regole a cui è correlata la Transizione CSS, il primo non viene menzionato, sebbene il suo uso introduca qualcosa di evidente, ma scarsamente controllato, nel tag.

La regola di transizione non è solo: hover e viceversa, può anche essere applicata con successo ad altre pseudo-classi, ad esempio: focus o: active.

In generale, Transizione e Trasformazione sono funzioni CSS che, logicamente, non sono direttamente correlate ad essa (si tratta di stili, non di algoritmi). Ma negli ultimi anni, gli accenti si sono spostati così tanto che non usare il ricco arsenale di CSS e CSS3 è semplicemente lusso insopprimibile.

A proposito di anormale e naturale

All'alba dei personal computer, quando veniva prodotto un processore matematico per i calcoli matematici, era anormale avere un 386esimo computer senza un coprocessore matematico quando si trattava di utilizzare efficacemente il programma Fortran per calcolare il percorso verso la luna. Naturalmente, oggi non accade a nessuno che compra un computer per chiedere se ha mezzi di implementazione hardware per i calcoli matematici.

Senza alcun dubbio, l'algoritmo per calcolare il tempo di transizione da uno stile all'altro o la rotazione di un tag attorno a un altro tag ha una relazione molto piccola con le idee sugli stili. Il tag non è un elettrone per ruotare vicino a un atomo.

E i CSS - per definizione, una tabella di stili a cascata e con i momenti di ereditarietà, tenendo conto dei dispositivi mobili, con priorità, combinazioni.

Ma il mondo sta cambiando così rapidamente. Oggi non è possibile chiamare una formula diversa una matematica, perché il concetto di un numero in un linguaggio di programmazione moderno non è molto diverso dal concetto di una stringa.

Ma se si adatta a tutti, se è conveniente ed efficace, allora forse ha senso cambiare le proprie idee. & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Apparentemente, CSS Transition & Transform farà una rivoluzione così piccola: non c'è bisogno di programmare qualcosa che non ne ha più bisogno. I programmatori soffrono da molto tempo della malattia della professione, che differisce come segue: riscrivere non solo ciò che gli altri hanno fatto prima di loro per il prossimo compito, ma anche quello che loro stessi hanno fatto ieri. Cosa fare, il mondo e le tecnologie sono mutevoli, e anche piccole metamorfosi nell'area di applicazione a volte portano alla necessità di significative modifiche al codice.

Tuttavia, una simile trasformazione degli algoritmi matematici in bellissime e convenienti regole CSS è molto pratica ed efficace.