Categoria:

Image shake con CSS3

07/01/2014 20:50 Pubblicato da

5-demo-css3-animation-shake_header

In questo tutorial mostrerò come ottenere l’effetto scossa utilizzando le animation di CSS. Utilizzerò un’immagine che a contatto con il cursore del mouse verrà scossa all’infinito.

Demo Download

Iniziamo dalla pagina HTML, dove dovremmo aggiungere il seguente codice

La classe .d-hover rappresenta il box più esterno. Il suo contenuto verrà centrato.

La classe .shake situata all’interno dell’elemento .d-hover è responsabile dello scuotimento. La modalità inline-block rende possibile centrarla all’interno del tag padre. La proprietà background specifica che lo sfondo di questo elemento sarà un’immagine.

Quando il cursore del mouse entra in contatto con la classe .shake partiranno due animazioni. La prima è denominata shake (che fa quindi riferimento ai @keyframes shake), avrà una durata di 0.8 secondi, un timing-function di tipo lineare e si ripeterà all’infinito. La seconda animation, denominata eyes, ha un timing-function di tipo step-end, ossia l’animazione sta nel suo stato iniziale quasi fino alla fine per poi saltare direttamente alla posizione finale, e una durata leggermente superiore alla prima animazione.
La proprietà transform-origin specifica che l’origine di questa trasformazione corrisponde al centro dell’elemento.

Lo scuotimento consiste in brevi traslazioni e timide rotazioni. Per ogni frame quindi l’elemento .shake traslerà sugli assi X e Y di un tot numero di pixel e ruoterà di un grado.
Per garantire la compatibilità con tutti i browser, bisognerebbe aggiungere anche le regole @-moz-keyframes, @-ms-keyframes, @-o-keyframes (fare riferimento alla demo da scaricare).

La seconda animation cambia semplicemente il background dell’elemento .shake quando si arriva al 90% dell’animazione, mentre negli altri casi il background rimane quello iniziale.

Demo Download

21/07/2017 10:14