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 make this text bigger?

    How to make css style on Google custom search engine

    How to add a background Image using CSS that looks like a border down each side of a div

    How to select multiple items using mouse click?

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How can I change the css class rules using jQuery?

    How to achieve this layout with CSS?

    CSS - How to center nested divs?

    How can I target CSS to a particular sharepoint Page Layout file?

    How to CSS style a radius border

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How to call in Javascript a requestAnimationFrame loop?

    how to change the selecting background color

    How is the force reload of javascript/css done in Symfony?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to put an image in div with CSS?

    How an mobile compatible website handles the performance?

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How to stylize left part of input range in Metro Apps?

    Show first image and display none other image

    How to expand link on hoover? Add “<” “>” symbols around link?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    How to adjust an image size with a progressive scaling on viewport resize

    How to continue CSS list on new page?

    how to make layers not overlap with each other in css [closed]

    CSS: How to produce rounded boxed list

    How to Change main menu color?

    How to make in CSS an overlay over an image?

    How to override nth-child