1

I need to know if it is possible to animate using CSS Animations a property

background: linear-gradient()

I am trying the following code (only valid for Chrome) and I cannot achieve the desired result.

If no possible with CSS Animations, can be solved using CSS Transitions, if yes could you please provide an example? Thanks.

#target {
  width: 300px;
  height: 300px;
  margin: 0;
  padding: 0;
  background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
  background-size: 600% 600%;
  animation: Gradient 8s ease infinite;
}

@keyframes Gradient {
  0% {
    background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
    background-position: 0% 50%
  }
  100% {
    background: linear-gradient(270deg, #18f0b8, #18a2f0, #ffffff);
    background-position: 0% 50%
  }
}
<div id="target"></div>
Radex
  • 7,815
  • 23
  • 54
  • 86
  • 2
    Gradients are images and so no, you can't. Reason is described in my answer here - http://stackoverflow.com/questions/35994521/background-image-in-keyframe-does-not-display-in-firefox-or-internet-explorer/36005661#36005661 – Harry Nov 24 '16 at 12:58
  • 1
    Here, You may relay on background-size and integrate both bg at once. example http://codepen.io/gc-nomade/pen/YpQZGP/ – G-Cyrillus Nov 24 '16 at 13:19
  • Thanks guys, sorry I did not notice this question was already answered :) – Radex Nov 24 '16 at 14:45

0 Answers0