Minificare CSS che includono animazioni con Keyframes

fda

Minificare CSS che includono animazioni con Keyframes

Ciao,
ho un foglio di stile con animazioni che sfruttano keyframes.
Tutto funziona regolarmente, ma quando minifico il css le animazioni smettono di funzionare.
Da cosa può dipendere e che voi sappiate esistono rimedi?
Grazie.

lorenzoroma

Evidentemente è "minificato" male.

hub

Ciao, se le animazioni @keyframes sono molte e complesse ti ritrovi un pasticcio, non è semplice, o utilizzi da riga di comando YUI Compressor: yui.github.io/yuicompressor/
oppure tenti con lo stesso motore che trovi online qui: refresh-sf.com/

Una prova di quanto dico puoi verificarla minimizzando il file animate.css: daneden.github.io/animate.css/
Alcune animazioni smetteranno di funzionare, in questo caso l'autore offre una versione già minimizzata.

Sono tante le animazioni?

fda

Ciao LorenzoRoma, ciao hub,
grazie per i suggerimenti.
Le animazioni sono poche.

hub

Quando le animazioni CSS3, sono poche solitamente si escludono dal file CSS, si minimizza e si reinseriscono al loro posto minimizzandole a "manina".
Dai un 'occhiata a questo esempio, ho preso un'animazione a caso da animate.css

versione normale


@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }


  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }


  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

versione minimizzata, nota anche la mancanza del ; finale


@keyframes pulse {
from {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
50% {-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}
to {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}

PS
Per minimizzare usa sempre il tool: **refresh-sf.com/

**

fda

Grazie hub.
Nell'esempio manca la parte dove viene richiamata l'animazione *pulse *(so che ad esempio vengono eliminati i simboli % e s, quest'ultimo per la durata); inoltre il codice sopra non è esattamente minificato, ed esempio è su più righe. Già provato "a manina", ma non ho capito su quale punto si blocca. Proverò ancora.

lorenzoroma

Io quando lavoro sul codice utilizzo Notepad++ (su Windows) ed ha anche la funzione per eliminare tutti gli spazi.

hub

@FDA said:

il codice sopra non è esattamente minificato, ed esempio è su più righe.
Certo che non è esattamente minificato, però funziona, e in termini di prestazioni / dimensioni è del tutto irrilevante.

Sempre da animate.css


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}


.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

In questo caso puoi minificare "hard" senza alcun tipo di malfunzionamento, ovviamente...


.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}

Ma con @keyframe bene che ti va entri in un labirinto di incompatibilità, in particolare con browser come IE.

@FDA said:

Già provato "a manina", ma non ho capito su quale punto si blocca. Proverò ancora.
Minimizza più soft, vedrai che ti garantisci il perfetto funzionamento.
Certo se hai moltissime animazioni è un problema di prestazioni, di penalizzazioni etc, ma se ne hai poche nemmeno Google Insight se ne accorge.

fda

Grazie hub.