Horizontal animation with overlay:hidden

Details
Written by: Stanko Milosev
Category: CSS3
Hits: 3575

One quick example without too much explanation.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/index.css">
    <title></title>
</head>
<body>
    <div id="parent">
        <div id="container">
            test
        </div>
    </div>
</body>
</html>

CSS:

#parent {
    margin: 0px auto 0px auto;
    width: 250px;
    overflow: hidden;
}

#container {
    position: relative;
    -webkit-animation-name: container;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes container {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(800px);
    }
}

Live example (Chrome only):

 

test