CSS 3 Animation example

by smombartz

HTML

<h1>CSS 3 Animation example</h1>

<div id="mainContent"> 
    <img id="myImage" src="http://www.kirupa.com/html5/examples/images/blueArrow.png">
</div>

<p>
    Example adapted from <a href="http://www.kirupa.com/html5/examples/css_animation.htm">kirupa</a>
</p>

CSS

body {
    font-family:      Arial, Helvetica, sans-serif;
    font-weight:      bold;
}

#mainContent {
    background-color: #B1DBFC;
    overflow:         hidden;
    width:            350px;
    height:           200px;
    padding:           10px;
    border-radius:     20px;

}

#myImage {
    
    animation-name:                    imageSlide;
    animation-duration:                2s;
    animation-timing-function:         ease-in;
    animation-iteration-count:         infinite;
 
    width:       100px;
    height:      100px;
    position:    relative;
    padding-top: 50px;
}
 
@keyframes imageSlide {
      0% {left: -150px;}
     20% {left:   50px;}
     80% {left:  200px;}
    100% {left:  600px;}
}