[Builbords in motion] Truck animations

by Dejan Munjiza

HTML

<div class="container">
    <div class="box1">background (if needed)</div>
    <div class="box2">desert + city</div>
    <div class="box4">
        <div class="panel-container">
            <div class="panel1"></div>
            <div class="panel2"></div>
            <div class="panel3"></div>
        </div>
</div>
    <div class="box3">grass</div>
</div>

CSS

.container {
    position: relative;
    width: 100%;
    height: 200px;
    float: left;
    border: 1px dotted #777;
}

.box1{
    width: 100%;
    height: 100%;
    float: left;
    background: #777;
}

.box2{
    width: 200px;
    height: 200px;
    position: absolute;
    background: white;
    animation: getoutofmyway 10s linear 20;
}

.box3{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 25%;
    background: #d2d2d2;
    animation: getoutofmyway 10s linear 20;
}

@keyframes getoutofmyway {
    from { left: 100%; }
    to { left: -200px; }
}

.box4 {
    position: fixed;
    margin-top: -200px;
    width: 100%;
    height: 200px;    
    background: gray;
    opacity: 0.5;
    text-align: left;
    z-index: 1;
}

/* Panels */
.panel-container {
    position: relative !important;
    width: 100%;
    height: 100%;
    float: left;
}

.panel1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: blue;
    animation: panel 1s linear 1;
    animation-fill-mode: forwards;
}

.panel2{
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: red;
    animation: panel 1s linear 1;
    animation-delay: 10s;
    animation-fill-mode: forwards;
}

.panel3{
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: green;
    animation: panel 1s linear 1;
    animation-delay: 20s;
    animation-fill-mode: forwards;
}

@keyframes panel {
    from { top: -100%; }
    to { top: 100%; }
}