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%}
 }

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.