CSS3 Key Frames and Nested Selectors

fiddle exploring how to access a nested div by its class attribute and then animate its location on screen using CSS3 key frames.

by brady houseknecht

HTML

<h1>Key Frames and Nested Selectors</h1>

<div id="tooltip">
    <div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt rutrum sem, ac sollicitudin augue. Cras mollis pulvinar libero, ac finibus sapien mattis nec. Morbi vitae tempus massa. Aenean semper eget augue sit amet fermentum. Etiam sodales massa et augue lobortis viverra. Quisque luctus, quam id dictum ultrices, turpis ex porttitor nisl, ut euismod nisi magna quis velit. In at lorem sit amet quam ornare convallis. Aenean tristique nisi vitae orci feugiat, et fermentum libero sodales. Suspendisse vel libero elit.</div>
    <div class="readmore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt rutrum sem, ac sollicitudin augue. Cras mollis pulvinar libero, ac finibus sapien mattis nec. Morbi vitae tempus massa. Aenean semper eget augue sit amet fermentum.</div>
</div>

CSS

.readmore {
    margin-left: 100%;
    width: 400px;
    height: 100px;
    background-color: yellow;
}
.fubar {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}
@-webkit-keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}

JavaScript

$(document).ready(function () {
    $("#tooltip .readmore").addClass('fubar');

});