Una breve guida ai principali proprieta di animazioni in CSS

In questo articolo vediamo velocemente con esempi le principali proprietà di CSS usati per realizzare animazioni di vario tipo. Vediamo come trasformare un elemento e rendere questa trasformazione fluida nonché come applicare filtri come nel Fotoshop alle immagini .

Come realizzare transizione fluida in CSS.

Quindi, per aggiungere una certa fluidità nella animazione che riguarda la trasformazione si utilizza la proprietà CSS3  transition è possibile specificare semplicemente il tempo necessario per modificare gli stili del elemento sotto il puntatore. Quindi, maggiore è il tempo di transizione  piu fluido e lento sarà la trasformazione del oggetto scelto.

Inoltre, alla proprita possono essere attribuiti anche altri parametri aggiuntivi. Se avete bisogno di una transizione per tutte le proprietà del elemento, per esempio deve cambiarsi colore e larghezza allora basta inserire valore  all o non scrivere nulla. Inoltre è possibile specificare parametri per il processo di transizione. Se non indicherai niente allora sara applicato il valore di default ciò è transition: all 1s ease;

Questa riga di codice dice che ogni elemento con questa proprietà cambierà il suo aspetto con ritardo di un secondo al passaggio del mouse (stato hover) sopra di esso. Questo ritardo si applicherà a tutte le proprietà, e come modo di passagio  sara eseguito effetto ease che vediamo in seguito.

Ridimensionamento del elemento

Per ridimensionare elemento posiamo utilizzare la proprietàà transform: scale() . In parentesi si prescrivono due valori: la grandezza finale rispetto atuale in  orizzontale e verticale. Come valore predefinito sono uguali a uno, in modo che se si scrive 2, Lo stato finale in sensi  di altezza o larghezza del elemento aumenta due volte. E possibile indicare  il valore anche in decimi.  Ad esempio:

transform: scale(1.5, 1.5); — aumentare le dimensioni per 1,5 dal valore iniziale
transform: scale(0.5, 0.5); — diminuire la grandezza a meta  ;
transform: scaleX(2); — aumentare larghezza del elemento in due .

Rotazione in CSS

Utilizzando la stessa proprietà transform: ma con  valore rotate, il valore indichiamo in gradi

transform: rotate(90deg); — ruota elemento per  90 gradi in senso orario

transform: rotate(-120deg); — ruota elemento per  120 gradi in senso contrario, e chi conosce la matematica bene capirà che in realtà , elemento ruoterà per  240 gradi in senso orario dato che il giro completo fa 360 gradi .

Effetto di spostamento nei CSS

I blocchi possono essere spostati senza problemi in qualsiasi direzione al passagio del mouse. Anche per questo viene utilizata la proprita Css3 transform: e  proprieta aggiuntiva  in questo caso sara  translate . A questa proprietà  dobimo indicare il valore di spostamento per asse X o Y per creare spostamento per una sola direzione, oppure indicare semplicemente translate e indicare valori numerici sia per la asse x in senso orizzontale per primo e puoi per la asse Y per spostamento in direzione verticale. È possibile utilizzare i valori negativi.
Transform: translateX(-100px); — spostare blocco per 100 px a sinistra
transform: translate(150px, -200px); — il blocco viene spostato per 150 pixle verso destra e per 200px in alto.

Come realizzare effetto di Inclinazione

Viene realizzato con aiuto della proprietà skew . È  possibile impostare inclinazione di un solo lato con X o Y. oppure entrambi X e Y
transform: skewX(15deg);

Vediamo il codice

<div class="box_4"style=" width:300px; height:120px; background: #ccc; border:1px solid #000;"></div>
<style type="text/css">
.box_4:hover{transform: skewX(15deg); transition:2s;}
</style>

e il risultato

Cambiare la trasparenza in CSS

Ora finiamo con la proprietà transform e vediamo un altra proprietà che si chiama opacity. Con essa, posiamo applicare ad elemento scelto, puo esser una immagine o lo sfondo di un blocco, una certa trasparenza per sbiadire immagine o renderla trasparente

.block{
        opacity: 0.2;
}
.block:hover{
        opacity: 1;
}

Naturalmente, conviene d'inserire anche la proprietà transition per classe .block per rendere passaggio piu piacevole .

Come realizzare effetto cambio colore al hover

Qui è tutto abbastanza semplice. Dobbiamo usare cosi detti pseudo-classi. Indicare per elemento o testo un altro colore nella proprietà  hover . Il colore può essere specificato in qualsiasi modo, utilizzando il nome del colore  o indicare il suo valore in modalità  RGB, o RGBA.

Come combinare vari proprieta di trasformazione in CSS

In realtà, puoi sempre inserire nella stessa riga diversi trasformazioni di CSS per per esempio rotatre e scalare elemento nello stesso momento

transform: scale(1.2, 1.2) rotate(-2deg);
background: #333;

In questo esempio, l'elemento sarà leggermente ingrandito, e  un puo inclinato nonche cambierà il colore di sfondo. Tutto questo si applica allo stesso tempo, ma allo stesso tempo piacevolmente per utente. A questo punto lascio a te di procedere con invenzione di varie accoppiate per raggiungere varie effetti  Le opzioni  in realtà sono molte.

Filtri per immagini in CSS

In CSS3  ci sono anche dei filtri , ora con questa tecnologia puoi fare quello con le immagini che potevi fare in precedenza soltanto  in un editor di immagini. Tutti i filtri sono vengono applicati tramite proprietà  filter: il nome del filtro (valore).

La proprietà è abbastanza giovane, quindi non usarlo senza i prefissi appropriati per ogni browser. Ad esempio, per farlo funzionare in Google Chrome, è necessario utilizzare il prefisso -webkit:

-webkit-filter: saturate(3); rende il colore del immagine o elemento a cui è applicato piu chiaro rispetto prima. È possibile impostare il valore da 1 a 5, dove 1 - è l'impostazione predefinita.

3

Si dovrebbe sottolineare che i filtri sono stati inventati in primo luogo da utilizzare per le immagini. Non si deve applicare questi filtri ad altri elementi anche se puoi provare .
-webkit-filter: sepia(0.7) –  aggiunge un effetto seppia, ci permette di dare alla foto un aspetto della vecchia fotografia.

4

Grayscale(1)  - aggiungere  colore grigio alla fotografia. Pertanto, è possibile trasformare una fotografia a colori in una in bianco e nero.
Drop-shadow  - una versione avanzata del ombra. La sintassi del filtro copia completamente le proprietà box-shadow, solo che qui e assente il parametro che regola contrazione . In generale,  permette di realizzare la stessa ombra ma ha due differenze:

Se l'ombra viene applicata al png-immagine( formato d'immagine senza sfondo in generale  ), drop-shadow disegnare questa ombra intorno al estremità del immagine e  non in forma di un quadrato. Questo è un enorme vantaggio.

Quando si specificano ombre multiple Drop-Shadow sottolinea non solo l'elemento principale, ma anche tutte le sue ombre precedenti.

Animazione con @keyframes

Con l'aiuto di proprietà di animation e @keyframes è possibile creare animazioni sorprendenti. Questa caratteristica css3 merita un libro a parte, in questo articolo mi limiterò a citare questa opportunità  soltanto per non dimenticare. Possibilità d'animazione non si limitano al movimento degli elementi qua e là ma oggi con il suo aiuto vengono creati diversi giochi in HTML5 e CSS3, nonché gli script.

Letto 1271 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso