CSS3 animation color with gradient

Question

I´m using CSS3 animation to turn one bootstrap accordion from one color no other, but the problem is that I see that is not possible with animation to do that transition with gradient, and the accordion seems too much 2D too me. I read that people do some tricks like putting one element one over the other and using the opacity, but in may case is not so easy set another element in the same position since is create dynamically.

Can you give me any suggestion tip please?

Here is what I try to do without success so far:

.panel-warning > .panel-heading {
    background: linear-gradient(to bottom, #FCFCFC 0%, #FFF4C4 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    opacity: 0;
}

.panel-warning > .panel-heading {
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: alert-warning;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: alert-warning;
    -moz-animation-timing-function: ease;
    opacity: 0.5;
}

Sorry but is very complicated since the HTML is create by JSP dynamically. — paul, May 03 '15 at 18:26
A minimal example showing the problem and the intended result would help us understand your requirements — vals, May 03 '15 at 19:54

score 1 · Answer 1 · answered May 03 '15 at 21:37

While I agree with the others that it's not clear what exactly you wish to accomplish, here's some demo code for simple animation of gradients:

.two:link, .two:visited {
  background: #2876b2;
  background: -webkit-linear-gradient(#2876b2, #549ad0);
  background: -moz-linear-gradient(#2876b2, #549ad0);
  background: -o-linear-gradient(#2876b2, #549ad0);
  background: linear-gradient(#2876b2, #549ad0);
  background-repeat: repeat;
  -webkit-background-size: 100% 200%;
  -moz-background-size: 100% 200%;
  background-size: 100% 200%;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
  background-position: 0 -102%;
}

This applies to a button and is taken from here.

If you're after something much more complicated, you're probably going to need some sophisticated JavaScript hackery.

Here you´re just moving the gradient. What I´m doing is a loop to move an animation from one color to another. I saw this demo yesterday. Thanks anywau — paul, May 04 '15 at 06:28

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

I guess you want a css3 gradient animation, so if you use the search in this site, you can find this issue which contains a possible solution to your question:

css3-animation-with-gradients

my favourite solution is Brian's http://jsfiddle.net/jSsZn/ CSS3

edited May 23 '17 at 12:14

Community

1
1

answered May 03 '15 at 22:00

motou

726
4
12

I think use that technique in my case would be complicated, but thanks! – paul May 04 '15 at 06:43

CSS3 animation color with gradient

2 Answers2