Il Simurai del CSS

Conoscete simurai.com? Si tratta di un blog nel quale l’autore si diverte a sperimentare con codice CSS3, un vero e proprio parco giochi personale. Nel suo ultimo post Sim (il nome dell’autore) crea un’animazione frame by frame, quella dei cartoni animati per intenderci, attraverso l’opzione steps() della proprietà animation-timing-function. Prendendone ispirazione ho provato a crearne una mia. Ecco cosa ho fatto.

Primo passo: trovare una sequenza di immagini

Il primo passo, forse quello più complicato, è trovare le immagini sequenziali che ricreino un movimento. Ho effettuato una ricerca online ed ho trovato questa riportata di seguito. L’ho ritagliata in photoshop e creato la composizione che mi serviva.
frame

Preparazione del codice html e css

<div id="frame"></div>
#frame{
    width:230px;
    height:143px;
    background:url(frame.jpg) no-repeat;
    animation-name:play;
    animation-duration:900ms;
    animation-timing-function:steps(23);
    animation-iteration-count:infinite;
}

@keyframes play{
    0% { background-position:0 0; }
    100% { background-position:-5290px 0; }
}

Il codice html è composto da un div contenitore dell’immagine come background. Nel codice css, puoi notare il valore steps() associato alla proprietà animation-timing-function. Questa opzione, rispetto alle altre (ease, linear ecc) che effettuano un’unico movimento da 0 a -5290px, permette di definire il numero di “frame” da visualizzare a intervalli di tempo. In pratica, all’interno delle parentesi del valore steps() verrà inserito il numero dei fotogrammi che compongono l’immagine totale.

Un altro esempio

Carino vero? Diciamo che potrebbe essere una valida alternativa alle gif. Ecco un altro esempio (logo che ruota in alto a destra).

Adesso provaci tu

Se il post è stato di tuo gradimento non dimenticare di condividerlo 😉 e per qualsiasi considerazione puoi usare il box dei commenti o la nostra fanpage. A presto.

Provalo subito

Prova la demo Consulta il codice
  • Erick Steve Low

    ciao scusa non ho capito una cosa, te quindi passi un insieme d’immagini o è un’unica immagine ?? 🙂

    • Antonio Polese

      Ciao Erick,
      passo un’unica immagine

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github