A Pen by Will Boyd.

Gradient-Animation-Trick.markdown

Gradient Animation Trick

CSS gradient colors can't be animated. This demo shows a workaround. Hover to see it in action. Implementation on left, visual explanation on right.

Blog post: Gradient Animation Trick

A Pen by Will Boyd on CodePen.

License.

index.html

<div class="container">
  <button disabled>Some Button</button>
  <div class="slider"></div>
  <div class="frame"></div>
</div>

<div class="info">
  You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it's on, then animate background-position to slide it up or down. The result is a simple animated fading gradient.
</div>

style.css

body {
  margin: 20px;
  background-color: #000;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 480px;
  height: 140px;
  background-color: #333;
  border-radius: 8px;
}

button {
  position: absolute;
  width: 160px;
  height: 36px;
  top: calc(50% - 18px);
  left: 50px;
  border: solid 1px #ccc;
  border-radius: 8px;
  color: #fff;
  font: 16px sans-serif;
  
  /* set up background gradient and animation */
  background-image: linear-gradient(#5187c4, #1c2f45);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
}
.container:hover button {
  /* shift background gradient position */
  background-position: 0 0;
}

.slider {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  margin-top: -36px;
  width: 160px;
  height: 72px;
  background-image: linear-gradient(#5187c4, #1c2f45);
  transition: margin-top .5s;
}
.container:hover .slider {
  margin-top: 0px;
}

.frame {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  box-sizing: border-box;
  width: 160px;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 8px;
}

.info {
  margin: 20px auto 0;
  color: #ccc;
  font: 18px/150% sans-serif;
  text-align: justify;
  width: 480px;
}