Smooth CSS transitions

by Greg Bowler

HTML

<p>You thought you had seen the last sprout...</p>

<div class="anim_absolute">
    <h1>Animation using absolute positioning:</h1>
    <img src="http://goo.gl/0364H">
</div>

<div class="anim_translate">
    <h1>Animation using translate:</h1>
    <img src="http://goo.gl/0364H">
</div>

CSS

@-webkit-keyframes AnimAbsolute {
    to {
        left: 128px;
    }
}
@keyframes AnimAbsolute {
    to {
        left: 128px;
    }
}

@-webkit-keyframes AnimTranslate {
    to {
        -webkit-transform: translate(128px, 0);
    }
}
@keyframes AnimTranslate {
    to {
        transform: translate(128px, 0);
    }
}

p {
    color: #ccc;
    text-align: center;
    font-style: italic;
}

img {
    width: 256px;
}
div {
    position: relative;
    height: 200px;
    margin: 32px;
    padding-bottom: 32px;
    border-bottom: 4px solid #aaa;
}

.anim_absolute img {
    position: absolute;
    left: 0;
    -webkit-animation: AnimAbsolute 10s ease infinite;
    animation: AnimAbsolute 10s ease infinite;
}

.anim_translate img {
    -webkit-transform: translate(0, 0);
    -webkit-animation: AnimTranslate 10s infinite;
    animation: AnimTranslate 10s infinite;
}

/* @g105b */