Web development basics Web development snippets

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:

Property Description
@keyframes Specifies the animation code
animation< A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies 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.

HTML:

CSS: