problem z transition

[Kriss06]

Cześć,

Mam mały problem z transitions, chciałbym aby background zrobiony jako gradiant przechodził łagodnie w drugi, lecz tak się nie dzieje. W czym jest problem?

Kod gradiantu:

background: #fffced;

background: -moz-linear-gradient(top, #fffced 0%, #fffced 52%, #e8e5d8 53%, #e8e5d8 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffced), color-stop(52%,#fffced), color-stop(53%,#e8e5d8), color-stop(100%,#e8e5d8));

background: -webkit-linear-gradient(top, #fffced 0%,#fffced 52%,#e8e5d8 53%,#e8e5d8 100%);

background: -o-linear-gradient(top, #fffced 0%,#fffced 52%,#e8e5d8 53%,#e8e5d8 100%);

background: -ms-linear-gradient(top, #fffced 0%,#fffced 52%,#e8e5d8 53%,#e8e5d8 100%);

background: linear-gradient(to bottom, #fffced 0%,#fffced 52%,#e8e5d8 53%,#e8e5d8 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffced', endColorstr='#e8e5d8',GradientType=0 );

kod transition:

-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;

Od razu mówię, błędu składniowego nie ma, jeżeli ustawie cienie, obramowania, kolor czcionki wszysko przechodzi w łagodny sposób, nawet jak ustawie jako bg img też zmienia się łagodnie.

Gdzie leży błąd i jak go obejść, pomożecie ?

[elwierka]

a może spróbuj dodać do selektora, w którym chcesz zrobić gradient, klasę "gradient" i w css nadać styl background:

.gradient {
background-image: url(../plugins/gradient.svg);
}

No i oczywiście stworzyć plik "gradient.svg" (ja zawsze wrzucam go do kat. plugins w swoich stronach):

<svg xmlns="https://www.w3.org/2000/svg" version="1.0">
<gr>
 <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="50%">
	 <stop offset="0%" style="stop-color: #000000;"/>
	 <stop offset="100%" style="stop-color: #ff0000;"/>
 </linearGradient>
</gr>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>

Pierwszy kolor

<stop offset="0%" style="stop-color: #000000;"/>

to kolor od którego zacznie się tworzenie gradientu (w tym przyp. kolor czarny), a drugi kolor #ff0000 - to kolor na którym gradient się kończy. Gradientem możesz na różny sposób manipulować. Płynne przejście uzyskasz wg mnie z tymi parametrami co pokazałam. Zmieniając offset ze 100% np na 20% zmniejszysz ilość koloru pierwszego w stosunku do drugiego. Zwiększając np wartość offsetu pierwszego z 0% na 100% zmniejszysz skalę gradientu (powstaną dwa odcinające się kolory, bez przejścia).

Jednym słowem - pobaw się wartościami aż do uzyskania pożądanych efektów.

[Kriss06]

dzięki za odpowiedź

[waren]

Cześć,

transition gradientów nie jest jeszcze wspierane w przeglądarkach, chociaż dokumentacja mówi, że powinny być wspierane

możesz użyc kilku tricków, np przesuwać background:

https://jsbin.com/uZOTiME/5/

i kod do podglądnięcia:

https://jsbin.com/uZOTiME/5/edit?html,css,js,output

pozdro