Animazioni ripetute con “alternate”

La proprietà animation-direction specifica se l’animazione deve agire in senso inverso e/o a cicli alternati. L’animation-iteration-count (che specifica il numero di volte in cui l’animazione deve ripetersi) nel particolare caso in cui tu scelga “alternate“, NON considera come un movimento completo quello di andata e ritorno. Per far si che “alternate” abbia effetto, bisogna specificare almeno 2 come valore, cosi che il primo movimento corrisponda all’andata e il secondo al ritorno. Senza “alternate“, avresti avuto due movimenti di andata con quelli di ritorno a scatto. Ecco un Fiddle!

@-webkit-keyframes move{
    0%{-webkit-transform:translateX(0px)} 
    100%{-webkit-transform:translateX(10px)}
}

.element {
    -webkit-animation: move 150ms ease-in-out 2 alternate;
}

Un’alternativa? Specificare 3 step raddoppiando il tempo totale e specificando solo 1 come valore di animation-iteration-count.

@-webkit-keyframes move{
    0%{-webkit-transform:translateX(0px)}
    50%{-webkit-transform:translateX(10px)} 
    100%{-webkit-transform:translateX(0px)}
}

.element {
    -webkit-animation: move 300ms ease-in-out 1;
}
Vai all'archivio
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github