Animated background 1

A sample of a custom animated background using CSS transforms

by cesar iduarte

HTML

<div class="bg-wrapper">
    <div class="bg">
    </div>
</div>

<p>
    Animated background
</p>

CSS

html, body {
    height: 550px;
}

.bg-wrapper {
    position: relative;
    height: 45%;
    width: 100%;
    overflow: hidden;
}

.bg {
    position: absolute;
    top: 0;
    bottom: 0;
    background: url('https://i1.wp.com/alikgriffin.smugmug.com/Portfolio/i-qJS339c/1/X3/AlikGriffin_Fuji_X-T1_56mm_Fukuoka_City_Rush-X3.jpg') no-repeat 0 center;
    width: 200%;
    animation: move-forward 40s linear infinite;
}

@keyframes move-forward {
    from { transform: translateX( 0 ) }
    to { transform: translateX( -750px ) }
}