In this video, we will teach you to create CITY ANIMATION via Pure CSS and HTML ( No Javascript use ).
PLEASE SUBSCRIBE US FOR MORE ANIMATION AND HTML TUTORIALS
==== Below Css Used for Red car ====
.red_car {
background: url(red_car.png) no-repeat center center;
background-size: 240px 120px;
height: 93px;
width: 235px;
position: relative;
top: 72%;
animation-name: red_car;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes red_car {
0% {
left:-100%;
}
50% {
left:0%;
}
100% {
left:100%;
}
}
.red_car .red_car_rim1, .red_car .red_car_rim2 {
background: rgba(0, 0, 0, 0) url(“truck-rim.png”) repeat scroll center center / cover;
height: 14px;
position: absolute;
top: 78%;
width: 14px;
}
.red_car .red_car_rim1 {
left: 32.4%;
-webkit-animation-name: red_car_rim1; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: red_car_rim1;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.red_car .red_car_rim2 {
left: 63%;
-webkit-animation-name: red_car_rim2; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: red_car_rim2;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes red_car_rim1 {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
@keyframes red_car_rim2 {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
===== Watch Cartoon Character Running on Road via CSS =====
==== Other HTML and CSS Tutorials====
SHARE this video with YOUR FRIENDS, Relative and Everyone and SUBSCRIBE us for more awesome tutorials!
Join our Youtube Channel
https://www.youtube.com/channel/UCCalqTYU_w_5ngpeVEMSvxQ
Join our Facebook group to see more latest activities
https://www.facebook.com/groups/how.to.tips.and.tricks
Follow us on Twitter
Tweets by howtotipstricks
Follow us on Instagram
https://www.instagram.com/how_to_tips_and_tricks2018/
Please like our Facebook page
https://www.facebook.com/How-To-Tips-and-Tricks-203015640638928
Please like our Other Youtube Channel
https://www.youtube.com/channel/UCSEoUn0L0Q_UEd6aBCP375A
source