Background transition with gradient

Question

Background transition with gradient

Navigation

#1 by (1 votes)

1

As far as I know, css does not support transition of backgrounds with gradient, but supports transition from "flat" colors, for example (background-color: #fff)

How did this effect apply here, then? link

I was able to reproduce the effect by placing one of the colors of the transparent gradient, and a background of a color just behind, thus transposing the background color from the back, but the effect is not the same.

I tried to understand using the developer tools, without success.

html css

asked by anonymous 12.06.2016 / 08:01

1 answer

Doubts about vertical and tableless alignment JButton how to get the Button Text inside event

score 1 · Accepted Answer

Well, as you say, doing transition with gradient is not yet possible with CSS.

On this site what they have are different divs for each background, all with

header.hero div.backgrounds>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    opacity: 0;

and then with CSS classes activate one by one making transition from opacity .

Here you can see all the divs: link

Here you can see them changing: link