CSS Background color transition/slide over when load

Question

I\'ve found a CSS transition that works on hover just fine, it slides my background color over, but only on hover. Is there a way with CSS to make this happen on load not hover?

Answer 1

This would work if you were using CSS3 keyframes instead, for example:

#banner-message {
  padding: 20px;
  width: 300px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg');
  background-color: #9ff;
  animation: animate-background linear 15s infinite;
}

@keyframes animate-background {
	from { background-position: 0px 0px; } 
	to { background-position: 300px 0px; }
}

  
Hello World

Notice how we are tweaking the css properties in the animate-background rule. THen we are just calling it in the css rule for the background container.

You're basically free to tweak any CSS3 style with this method.