CODEWITHSUNDEEP
cssanimationcss-transitionsbackground-color
Higher-Kinded Type
Higher-Kinded Type

Reputation: 2054

CSS3 <body> background-color change linear infinite animation

I need to change the background color of my page in a loop. So I have something like this:

.bg-changer {
    animation: bg-img-slider 10s linear infinite;
    transition: background 300ms ease-in 200ms;


body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h1 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>BG</title>
</head>

<body class="bg-changer">
  <div class="main-content ">
    <div class="page-header">
      <h1>Page Title</h1>
      <p>This is the tag line</p>
    </div>
  </div>
</body>

</html>

}

@keyframes bg-img-slider {
    0%,
    100% {
        background-image: radial-gradient(silver, snow);
    }
    20% {
        background-image: radial-gradient(#2b5876, #4e4376);
        /*animation-timing-function: ease-in;*/
    }
    40% {
        background-image: radial-gradient(#44A08D, #093637);
    }
    60% {
        background-image: radial-gradient(#DD5E89, #F7BB97);
        /*animation-timing-function: ease-in;*/
    }
    80% {
        background-image: radial-gradient(#348F50, #56B4D3);
    }
    90% {
        background-image: radial-gradient(#bdc3c7, #2c3e50);
        /*animation-timing-function: ease-in;*/
    }
}

I apply the class bg-changer to the body tag. It works but the color change happens like a slap. I tried several things to make it smoother. I tried the transition, animation-timing-fuction and a few others (also placed them in the keyframes). Nothing seems to work!

Please educate me with the following questions I have:

Thanks in advance.

Upvotes: 1

Views: 6611

Answers (2)

vals
vals

Reputation: 64264

A gradient is not animatable. (The only exception being the position).

A background-color is animatable, but is limited to a solid color.

div {
  width: 200px;
  height: 100px;
  animation: colors 10s infinite;
}

@keyframes colors {
    from {background-color: blue;}  
    to {background-color: green;}  
}
<div></div>

If you want to animate a radial gradient, you can do it somehow with a trick, using a transparency

div {
  width: 200px;
  height: 100px;
  animation: colors 2s infinite;
  background-image: radial-gradient(circle, transparent, red);
}

@keyframes colors {
    from {background-color: blue;}  
    to {background-color: green;}  
}
<div></div>

But you are limited to animating the inner part, of the outer part

A more elaborate example would be to use a pseudo element, and animate the shadow

div {
    width: 200px;
    height: 200px;
  position: relative;
  border: solid 1px red;
  overflow: hidden;
}

div:after {
  content: "";
  width: 300px;
  height: 300px;
  top: -50px;
  left: -50px;
  position: absolute;
  border-radius: 50%;
  animation: colors 3s infinite;
}

@keyframes colors {
  from {background-color: green;
        box-shadow: inset 0px 0px 80px 80px yellow;
    }
  to {background-color: blue;
        box-shadow: inset 0px 0px 80px 100px red;
    }

}
<div></div>

Well, the result isn't good looking, but you get the idea.

Upvotes: 4

Krishna
Krishna

Reputation: 115

I think you are using background properly, but for a smooth transition, use something like animations.

For example: use animation in transitions like animation_in, animation_out etc.Also, try transition timing function like

{
transition-timing-function: ease-in-out;
}

for more http://www.the-art-of-web.com/css/timing-function/.

Upvotes: 0

Related Questions