CODEWITHSUNDEEP
cssanimation
Boris Perepelita
Boris Perepelita

Reputation: 11

CSS background animation

I need to make this animation as a background: https://www.dropbox.com/s/yu1kot89f05ybgn/Comp%201_10.mov?dl=0

I've tried to do it with image:

background-image url('../images/content/fracture.png')
animation background-moving linear 10s infinite;

But animation from video is more complicated.

What technology should be used here? (CSS, SVG-animation...)? Or provide please some examples.

Upvotes: 0

Views: 121

Answers (1)

Navaneeth
Navaneeth

Reputation: 2584

I would like to give some options to you based on my experience.

  • Have a GIF file and set the background (easiest)
  • Get a PNG/SVG With 3 hills, add animate the background based on CSS animation & CSS transition (works)
  • Simply add a video based on HTML5 video tags. Many sites does that. (But, based on the video you shared, this is unnecessary.)
  • Have a canvas as background & write JavaScript that loops the transition (complex)

Upvotes: 1

Related Questions