How to create scrolling background

      No Comments on How to create scrolling background

How to create scrolling background using CSS animations.

Understanding CSS animations:

  • An animation is something that lets you change CSS of any element from one to another.
  • CSS can be changed infinite times.
  • CSS3 animations are specified using keyframes. Keyframes hold what styles the element will have at certain times.

The @keyframes rul

When CSS is applied in the @keyframes rule, style of an element automatically changes from curren to new style over time.

Properties of animations are:

@keyframesSpecifies the animation code
animation<A shorthand property for setting all the animation properties
animation-delaySpecifies a delay for the start of an animation
animation-directionSpecifies whether an animation should play in reverse direction or alternate cycles
animation-durationSpecifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-modeSpecifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-countSpecifies the number of times an animation should be played
animation-nameSpecifies the name of the @keyframes animation
animation-play-stateSpecifies whether the animation is running or paused
animation-timing-functionSpecifies the speed curve of the animation

How to create scrolling background

For creating scrolling background animation we define backgroundScroll animation in the @keyframes rule. This animation transforms the background position from 0,0 to 0, -800px. The background image is repeated so that there are no empty spaces anytime during the scroll. Animation is run infinitely to give the scrolling effect.

animation: backgroundScroll 60s linear infinite;
specifies the animation with name backgroundScroll has duration of 60s is of linear type and runs infinitely.


<div id="scroll_inner">
  <div id="horizontal-scroll"></div>


#horizontal-scroll {
width: 100%;  
height: 100%;  
background: url( repeat;
-webkit-animation: backgroundScroll 60s linear infinite;
animation: backgroundScroll 60s linear infinite; 
position: absolute;top:0;left:0;z-index:10;

/* animation */
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position: 0px -800px;}  
@keyframes backgroundScroll {
from {background-position: 0 0;}  
to {background-position: 0px -800px;}  

Leave a Reply

Your email address will not be published. Required fields are marked *