Adding animation to the degree of element linear gradient

Question

I am working on this demo. How can I add or reduce 90 degree to the .box linear-gradient with animation based on the #anim-left or #anim-right click?

I was able to add some CSS but this is jumping on changing the degree

$("#anim-left").on("click", function() {
  $('.box').toggleClass('box-reverse');

  // setInterval(function(){ }, 1);

  //    $(this).css({
  //     background: "linear-gradient(90"+90+"deg, #fff 50%, #ffe600 50%)" 
  // });

});

$("#anim-right").on("click", function() {
  $('.box').toggleClass('box-reverse');

  // setInterval(function(){ }, 1);

  //    $(this).css({
  //     background: "linear-gradient(90"+90+"deg, #fff 50%, #ffe600 50%)" 
  // });

});

.box {
  height: 120px;
  width: 120px;
  background: linear-gradient(90deg, red 50%, blue 50%);
  transition: all 3s ease-in-out;
}

.box-reverse {
  background: linear-gradient(270deg, red 50%, blue 50%);
  transition: all 3s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

<button id="anim-left"> Animate To Left </button>
<button id="anim-right"> Animate To Right </button>

[It seem animating linear-gradient isn't suported](https://stackoverflow.com/questions/23441060/animating-linear-gradient-using-css) — David Klinge, Apr 26 '19 at 22:18

score 1 · Accepted Answer · answered Apr 26 '19 at 23:04

You cannot animate gradient but in this case you can consider a simple rotation:

$("#anim-left").on("click", function() {
  $('.box').toggleClass('box-reverse');

});

$("#anim-right").on("click", function() {
  $('.box').toggleClass('box-reverse');
});

.box {
  height: 120px;
  width: 120px;
  position:relative;
  overflow:hidden;
}
.box:before {
  content:"";
  top:-25px;
  left:-25px;
  right:-25px;
  bottom:-25px;
  position:absolute;
  background: linear-gradient(90deg, red 50%, blue 50%);
  transition: all 3s ease-in-out;

}

.box-reverse:before {
  transform:rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

<button id="anim-left"> Animate To Left </button>
<button id="anim-right"> Animate To Right </button>

if you want a continuous animation simply consider a variable that you increase/decrease:

var rotation = 0;

$("#anim-left").on("click", function() {
  rotation -= 90;
  $('.box').css("--r", rotation + "deg");

});

$("#anim-right").on("click", function() {
  rotation += 90;
  $('.box').css("--r", rotation + "deg");
});

.box {
  height: 120px;
  width: 120px;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: "";
  top: -25px;
  left: -25px;
  right: -25px;
  bottom: -25px;
  position: absolute;
  background: linear-gradient(90deg, red 50%, blue 50%);
  transform: rotate(var(--r, 0deg));
  transition: all 1s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

<button id="anim-left"> Animate To Left </button>
<button id="anim-right"> Animate To Right </button>

Adding animation to the degree of element linear gradient

1 Answers1