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 do I tile background images in this specific way?

    How to use modernizr for border-image

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    CSS - how to style a footer

    How to draw a guitar string using css?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How to put text on placeholder image

    How to force CSS to be displayed on empty element following whitespace

    How to position a div so that it always appear 100px from top of the visible display

    CSS: How to refer to a tag

    How can I apply an external CSS class to a span created with dojo.create?

    how to color share price changes: using css() method on dynamically created elements?

    How do I import 2 different files icons?

    How to make a circle breadcrumb with only css

    How to align brand title and links left in Bootstrap navbar?

    how to position icon just after h2 tag using :after pseudo even though 100% width

    How to draw a dotted line with css?

    How to preserve sibling element position when one sibling is absolutely positioned?

    Wordpress- How do i change the default font of navigation menu?

    How to set color on mouse hover - css

    jQuery Tooltip - How To Declare 2 Options

    Need help determining how to position this element with CSS

    how to blur the background image only in css

    CSS style not showing on print preview

    How to perform arithmetic operations in CSS?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    CSS How to center link elements within a div

    How to change the CSS of the active toggle button using pseudo CSS transitions

    How can I add a transition for this growing div?