Web Analytics Made Easy -
StatCounter Background image animation - CodingForum

Announcement

Collapse
No announcement yet.

Background image animation

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Background image animation

    Hello,

    I am trying to get a background image to automatically move from left to right just once with a smooth scroll.

    My thinking
    position the image -1000px to the left and animate it to 0px left

    Is there a way to accomplish this.

    Here is a rough image
    Click image for larger version

Name:	welcomeslide.jpg
Views:	1
Size:	39.4 KB
ID:	2283589

    Thanks in advance

  • #2
    /* The animation code */
    @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    }

    /* The element to apply the animation to */
    div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    } Try this code...

    Comment


    • #3
      While the code by eumaxindia isn’t answering the specific question it is a good hint. You just need to apply the image as background image and animate the background position, like so: https://jsfiddle.net/y2ekhgq6/1 (click on “run” to see it).
      Stop solving problems you don’t yet have!

      Comment


      • #4
        You can try this css also,

        #animate-area {
        width: 560px;
        height: 400px;
        background-image: url(example.jpg);
        background-position: 0px 0px;
        background-repeat: repeat-x;

        animation: animatedBackground 40s linear infinite;
        }

        Comment

        Working...
        X