CODEWITHSUNDEEP
css
user5937446
user5937446

Reputation:

Can animation and gradients work together?

I put some gradients in an animation but it didn't work, why? (blah blah blah, to be able to post this question)

EDIT:

CSS

        @keyframes sample {
            0% {background: -moz-linear-gradient(#000,#fff)}
            100% {background: -moz-linear-gradient(#fff,#000)}
        }
        button {
            animation: sample 1s;
            -moz-animation: sample 1s;
        }

Upvotes: 0

Views: 33

Answers (1)

Chris W.
Chris W.

Reputation: 23280

Only answering because the duplicate examples seemed rubbish since they don't even offer a potential workaround, and I like helping people learn. So, for you to tinker...and even added a little pizazz for flavor...

CODEPEN

Keep in mind you're not animating your gradient, you're animating movement to give the illusion of animated gradients.

and some html/css...

@-webkit-keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

@keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

#magic {
  background: linear-gradient(to right, #fefefe, #ED1C24, #ED1C24, #f60, #f60, #ff0, #ff0, #0c4, #0c4, #09c, #09c, #00c, #00c, #909, #909, #ED1C24, #ED1C24, #fefefe);
  background-size: 1000% 100%;
  background-position: 0 0;
  -webkit-animation: vertigoBG 100s linear infinite;
  animation: vertigoBG 20s linear infinite;
  position: absolute;
  top: 0;
  width: 100%;
  height: 170px;
  -webkit-transform: skewY(-2deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  margin-top: -85px;
  z-index: -1;
}
<div id="magic"></div>

Enjoy!

Upvotes: 2

Related Questions