How to animate a div to move from end to end infinitely


Tags: html,css

Problem :

Html

<div id="box"></div>

CSS

#box{
  width:50px;
  height:50px;
  background-color:red;
}

I want the div "box" to move from left end of the browser to right end & to continue the same as a loop. How can i do that with CSS alone ?



Solution :

This will do it nicely:

#box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: left-to-right 5s infinite; /* Chrome, Safari, Opera */
  animation: left-to-right 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes left-to-right {
  from {left: 0;}
  to {left: 100%;}
}

@keyframes left-to-right {
  from {left: 0;}
  to {left: 100%;}
}

    CSS Howto..

    How to center horizontally a div within an li in CSS

    how to set auto div height from ul/li elements variable height

    How to fake width animation with CSS transform?

    How to get different class selectors using nth-child in css

    How to apply effects to a unicode character in CSS? [closed]

    How to apply struts2 tags on existing jsp file without affecting its css and js

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to background css with php variable

    how to style a horizontal submenu with nested

      CSS: Adding border to button on hover. How avoiding a shifting of the following elements? [duplicate]

      How to fit the title to the entire page

      How to get a CSS selector using Selenium WebDriver?

      How to style my unordered list like a table?

      My slideshow only cycles through one picture

      How to horizontally stack elements using CSS?

      Dropdown list doesn't show up, what am i doing wrong

      How do I remove the gap between the header and image slider

      Django + Mac osx how to use less css?

      Preload all CSS images while showing a preloader

      CSS Overflow, the scroll bar appears at the bottom, how can I get a scroll bar at the top?

      How to override nth-child

      CSS: How to shadow a field like this? [closed]

      How can I avoid CSS delay in Rails 3.2

      IE11 shows every display: table-cell element at a new line

      How to move up an inner box and keep outer box in place with CSS?

      How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

      How i can put the video showing image in front of image using jQuery css in html?

      How to achieve cellpadding with divs or likeiwse?

      Why does my progress bar shows full progress value before it start loading