Orange Pulley Blog

Tech Things Worth Writing About

In a web world slowly being overcome with micro-interactions, animations are critical to any designers portfolio. And there are lots and lots of animations out there…

I’m a simple guy, however, and happen to really like background animations as a low-hanging fruit to help spice up your design and, obviously, user experience.

The real trick to this particular enhancement, however, is using this site to generate the CSS code you want:

https://www.gradient-animator.com/

Easy.

Anyway, video + css used below.

Build beautiful.

THE CSS

.animateBackground {
  background: linear-gradient(270deg, #662424, #5a6624);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 0s ease infinite;
  -moz-animation: AnimationName 0s ease infinite;
  animation: AnimationName 0s ease infinite;
 }
 @-webkit-keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }
 @-moz-keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }
 @keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
 }