How to make a svg-filled background go animating by pure CSS?


Tags: javascript,css,svg

Problem :

Is there any pure CSS way to create some effect like this? to make it easier to understand, I have make a demo with JavaScript to implement this.

http://jsfiddle.net/78h823dd/3/

function renderHandler() {
  x+=offset;
  $("#debug").val(x);
  $('.test').css('background-position', x.toString() + 'px 0');
}


Solution :

You can animate it quite easily with CSS using the following:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 50%; }
}

and by adding this to the css for the class:

.test {
  /* rest of code */
  animation: animatedBackground 5s linear infinite;
}

Changing the 5s to a lower time will speed it up and a higher time will slow it down. However I'm not aware of a way to dynamically change the speed of it without JavaScript.

Fiddle


    CSS Howto..

    How to conditionally resize image if screen not wide enough, with CSS?

    How to make a div fill up remaining horizontal space

    How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

    How to expand and collapse three div's side by side?

    Using jQuery to show/hide list items

    How to make a different background for each link from a navbar? [closed]

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    How to create a faded background image?

    background image not showing on nested

    How can I use JQuery toggle for multile DIVs?

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    How can I insert new text with a hyperlink into a page in CSS?

    How can i go back, forward and print a (local) WebBrowser1.DocumentText html page that's sourced from my.resorces - vb.net

    How to make content fill space inside
    tag in html?

    Hovering over navigation link to show a separate div

    How to reset jQuery toggled classes applied throughout the page? (AngularProject)

    How to align body of the webpage to center?

    How do I override * asterisk for css?

    How to put a background video loop on a website HTML/CSS

    How do I center images inside a list?

    How to display a div's name with jquery and css

    How can I make a 2-level navigation bar? [closed]

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    Border of outer element affects how margin of inner element is displayed, why?

    How to use printer friendly function with CTRL+p?

    How to create DropDown MenuBar using CSS

    How to ignore parent css style

    How to clone an element using class name and append it to the body

    How do I do this CSS border-bottom

    How is better to do with CSS sprites [closed]