Płynne przejście gradientu

Question

Z jakiegoś powodu, kiedy dodam do CSS'a 

transition: all 0.2s ease-in-out;

kiedy tło diva ustawione jest na

background: linear-gradient(#0087ff, #003dff);

to kiedy następuje jego zmiana, na np

background: linear-gradient(#22a9ff, #225fff);

dzieje się ona natychmiastowo, w przeciwieństwie do sytuacji, kiedy tło ma wartość choćby

background: #225fff;

Jest możliwość, aby i przy gradiencie zmiana koloru tła była płynna?

Answer 1

Da się to obejść jednak warto się zagłębić jak to działa. linear-gradient generuje obrazek który jest przypisywany do tła. Dlatego też używa się go jako właściwość background-image a nie background-color. background-image nie jest animowany bo skąd wiadomo jak zrobić animacje przejścia miedzy 2 obrazami? 

Aby to obejść dodaj dwa elementy z jednym i drugim tłem. I tylko jedno tło animuj poprzez opacity ;) 

Jeśli potrzebujesz lepszego przejścia między gradientami możesz wykorzystać SVG i animować właściwość stop-color która nie jest obrazkiem ;) 

https://codepen.io/ZachSaucier/pen/QNdYBb?editors=1100 

Comments

W ramach ciekawostki, nieco zmodyfikowany kody z przykładu podanego "wyżej" przez @rafal.budzis; on-line. 

---

@rafal.budzis, jednak zmieniając opacity, zmieni się ono także dla elementów wewnątrz

---

Dawidziu a czy ja kazałem mieć jakieś elementy wewnątrz? ;) Możesz pobawić się pozycją absolutną lub skopiować elementy wewnątrz do obu elementów.

VBService  Dzięki ;) ja wrzuciłem pierwszy przykład z stacka ;) Wiedziałem że tak się da ale nie chciało mi się tego pisać :D

---

@Dawidziu, to musi (może) być na zasadzie np.

<div class="gradient-container">
  <!-- opacity: 1 -->
  <div class="gradient">Gradient: blue, red</div>
  <!-- opacity: 0 -->
  <div class="hover">Gradient: red, blue</div>
</div>

i w css-ie zamieniasz (transition, animation)

<div class="gradient-container">
  <!-- opacity: 0 -->
  <div class="gradient">Gradient: blue, red</div>
  <!-- opacity: 1 -->
  <div class="hover">Gradient: red, blue</div>
</div>

 

.gradient-container {
  position: relative;
}
.gradient-container div {
  position: absolute;
}

resztę css-a dopisz sam.

 

 [ on-line ]

---

@rafal.budzis, nigdzie nie napisałem, że tak kazałeś, po prostu raczej szukałbym sposobu, żeby mogły one tam być nienaruszone