CSS3 Road Animation with City background

In this tutorial, we will show you how to make Road Animation with City Background using CSS. You can see demo using press below button and you can also download source code of this animation.

Demo Download

Step to Make Road Animation with City background using CSS3

To make road animation with city background we need to follow the below steps

  1. index.html
  2. css files
  3. PNG Images

1: Index.html

First of all we create a index.html file for write content, connect to style.css file in head section and following code paste in body section.

<body>
    <div class="bg">
        <!--Truck goto right-->
        <div class="truck-right">
            <div class="truck_rim_one"></div>
            <div class="truck_rim_two"></div>
        </div>
        <!--Truck goto left-->
        <div class="truck-left">
            <div class="truck_rim_one"></div>
            <div class="truck_rim_two"></div>
        </div>
    </div>

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

</body>

As you can see in above code, here we use multiple class and sub-class for animation, now we go to css file for animation

2: css files

Now create a css file and connect in html.

body {
    margin: 0;
    padding: 0;
}


/*Backgroung*/

.bg {
    background: url(images/bg.jpg) bottom no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 892px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.bg-bottom {
    background: url(images/bg-bottom.png) bottom no-repeat;
    background-size: 100%;
    max-width: 892px;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    position: relative;
    top: -500px;
    z-index: 9;
}


/*Truck got right*/

.truck-right {
    background: url(images/truck-right.png) no-repeat center center;
    height: 93px;
    width: 235px;
    position: relative;
    top: 53%;
    animation-name: truck_right;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes truck_right {
    0% {
        left: -100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

.truck-right .truck_rim_one,
.truck-right .truck_rim_two {
    background: url(images/truck-rim.png) no-repeat center center;
    background-size: cover;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 75%;
    animation-name: right_truck_rim;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.truck-right .truck_rim_one {
    left: 23%;
}

@keyframes right_truck_rim {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.truck-right .truck_rim_two {
    left: 75%;
}


/*Truck goto left*/

.truck-left {
    background: url(images/truck-left.png) no-repeat center center;
    height: 93px;
    width: 235px;
    position: relative;
    top: 42%;
    animation-name: truck_left;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes truck_left {
    0% {
        right: -100%;
    }
    50% {
        right: 0;
    }
    100% {
        right: 100%;
    }
}

.truck-left .truck_rim_one,
.truck-left .truck_rim_two {
    background: url(images/truck-rim.png) no-repeat center center;
    background-size: cover;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 75%;
    animation-name: left_truck_rim;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.truck-left .truck_rim_one {
    left: 20%;
}

.truck-left .truck_rim_two {
    left: 71%;
}

@keyframes left_truck_rim {
    0% {
        transform: rotate(360deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Above css code is very easy to understand for animation.

Conclusion

Today we learnt how to make css3 road animation with city background using css3, you can add multiple this type of animation in your website just by adding the HTML markup and css code

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *