Animazione CSS3 con sfumature

Non c’è davvero alcun modo per animare uno sfondo sfumato con i CSS?

qualcosa di simile a:

@-webkit-keyframes pulse { 0% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 50% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 100% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } } 

Lo so, per Safari 5.1+ e Chrome 10+ c’è una nuova syntax del gradiente, ma per ora, devo attenermi a quella vecchia per questo progetto.

Le transizioni non sono ancora supportate sui gradienti webkit. È nelle specifiche, ma non funziona ancora.

(ps se stai facendo solo transizioni di colore – potresti voler controllare -webkit-filters – che animano!)

Aggiornamento: transizioni gradiente apparentemente funzionano in IE10 +

Metti ogni variazione del gradiente sul proprio livello. Posizionali in modo assoluto Dà a ciascuno il proprio set di fotogrammi chiave sincronizzati l’uno con l’altro. In quei fotogrammi chiave definisci l’opacità per ogni livello, ad ogni fotogramma chiave, con 1 e 0 mescolati tra i fotogrammi chiave.

Fai attenzione che il colore del contenitore scorre all’interno, quindi avvolgi i livelli in un genitore con uno sfondo bianco.

http://jsfiddle.net/jSsZn/

Ho risolto il problema applicando: prima dell’attribuzione a un tag.

Link: http://codepen.io/azizarslan/pen/xsoje

CSS:

 nav ul#menu li a { display: block; position: relative; z-index: 1; /* webkit gradient background */ background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0)); } nav ul#menu li a:before { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; /* webkit gradient background */ background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145)); /* webkit transition */ -webkit-transition: all 250ms linear; /* before hack */ content: "."; text-indent: -99999px; } nav ul#menu li a:hover:before { opacity: 1; } 

Dovresti controllare la carta vetrata css: questo ti consente di ottenere gradienti animati, ma non è una soluzione css pura. La carta vetrata Css si occupa del rendering cross-browser del gradiente e c’è un pezzo di javascript che gestisce l’animazione.

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

@ Brian invece di usare nuovi elementi html, usa gli elementi sudo: before e: after. Posiziona l’elemento principale come relativo, quindi posiziona gli elementi pseudo come assoluto con 0 per alto, a sinistra, a destra e in basso.

HTML:

 

CSS:

 div { width: 200px; height: 200px; position: relative; } div::before, div::after { display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

Aggiungi i tuoi keyframe e gradienti al div e agli pseudo elementi usando l’opacità. Usa z-index per controllare quale è in cima al quale.

se stai cercando una transizione del tuo testo da un colore solido a un gradiente. Basta animare il colore rgba del testo per rivelare il gradiente di sfondo applicato su di esso.

CSS:

 .button { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4)); -webkit-background-clip: text; color: rgba(255,255,255,1); -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .button:hover { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4)); -webkit-background-clip: text; color: rgba(255,255,255,0); }