Cycle movement animation using HTML and CSS

In this article, we will see one coolest CSS animation examples CSS animation is an incredibly useful and powerful tool. It can add interest or creative excitement, direct the user’s eye, explain something quickly and succinctly, and improve usability. 

What is CSS animation?

CSS animation is a method of animating certain HTML elements without having to use the processor and memory-hungry JavaScript or Flash. There’s no limit to the number or frequency of CSS properties that can be changed.

CSS keyframes for the animation: these keyframes contain the styles that the element will have. To see the result simply copy and paste the code into two different files.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cycle</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="bicycle-container">
        <div class="wheel back-wheel">
            <div class="tire"></div>
            <div class="rim"></div>
            <div class="spokes"></div>
            <div class="spokes"></div>
            <div class="hub"></div>
        </div>
        <div class="wheel front-wheel">
            <div class="tire"></div>
            <div class="rim"></div>
            <div class="spokes"></div>
            <div class="spokes"></div>
            <div class="hub"></div>
        </div>
        <div class="gear">
            <div class="gear-red"></div>
            <div class="tube pedal-tube"></div>
            <div class="pedal"></div>
        </div>
        <div class="tube chain-tube"></div>
        <div class="tube seat-tube-back"></div>
        <div class="tube seat-tube-front"></div>
        <div class="tube seat-tube-post"></div>
        <div class="tube top-tube"></div>
        <div class="tube top-handlebar-tube"></div>
        <div class="tube top-handlebar-tube2"></div>
        <div class="tube down-tube"></div>
        <div class="tube head-tube"></div>
        <div class="tube head-tube-post"></div>
        <div class="saddle"></div>
        <div class="handlebars"></div>
    </div>
    <div class="ground-container">
        <div class="ground ground1"></div>
        <div class="ground ground2"></div>
        <div class="ground ground3"></div>
    </div>
</body>

</html>

CSS Code:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: #364675;
}

.bicycle-container {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 350px;
	height: 300px;
	overflow: hidden;
}

.bicycle-container .wheel {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	width: 120px;
	height: 120px;
	box-shadow: 0 10px 15px -12px #0000004d;
}

.bicycle-container .wheel .tire {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	border: 10px solid #151515;
	z-index: 2;
}

.bicycle-container .wheel .rim {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 114px;
	height: 114px;
	border-radius: 50%;
	border: 10px solid #14dc57;
	z-index: 1;
}

.bicycle-container .wheel .spokes {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid #14dc57;
	z-index: 1;
	animation: rt 2s infinite linear;
	background: #c864641a;
}

.bicycle-container .wheel .spokes:nth-of-type(3) {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #14dc57;
}

.bicycle-container .wheel .hub {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #14dc35;
}

.bicycle-container .back-wheel {
	left: 0;
}

.bicycle-container .front-wheel {
	right: 0;
}

.bicycle-container .gear {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: calc(120px + 39.6px);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #14dc57;
	z-index: 4;
	animation: rt 3s infinite linear;
}

.bicycle-container .gear .gear-red {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid #131312;
}

.bicycle-container .gear .pedal-tube {
	position: absolute;
	margin: auto;
	top: -30px;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotate(-90deg);
	width: 20px;
}

.bicycle-container .gear .pedal {
	position: absolute;
	margin: auto;
	top: -50px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 20px;
	height: 5px;
	background: #161515;
	border-radius: 5px;
	z-index: 3;
}

.bicycle-container .tube {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	height: 5px;
	border-radius: 5px;
	background: #090a0a;
	z-index: 3;
}

.bicycle-container .chain-tube {
	left: calc(120px / 2);
	width: 120px;
}

.bicycle-container .seat-tube-back {
	left: calc(120px / 2);
	transform-origin: left;
	transform: rotate(-60deg);
	width: 120px;
}

.bicycle-container .seat-tube-front {
	left: calc(120px / 2);
	transform-origin: right;
	transform: rotate(60deg);
	width: 120px;
}

.bicycle-container .seat-tube-post {
	left: calc((120px / 2) - 20px);
	transform-origin: right;
	transform: rotate(60deg);
	background: #110e0e;
	z-index: 1;
	height: calc(5px - 1px);
	width: 140px;
}

.bicycle-container .top-tube {
	left: 120px;
	bottom: initial;
	top: 44px;
	width: 113px;
}

.bicycle-container .top-handlebar-tube {
	right: 112px;
	bottom: initial;
	top: 25px;
	width: 20px;
	background: #349c44;
}

.bicycle-container .top-handlebar-tube2 {
	right: 90px;
	bottom: initial;
	top: 25px;
	width: 25px;
	background: #349c44;
	border-radius: 0%;
}

.bicycle-container .down-tube {
	left: calc(120px + 60px);
	width: 100px;
	transform-origin: left;
	transform: rotate(-50deg);
}

.bicycle-container .head-tube {
	right: calc(120px / 2);
	transform-origin: right;
	transform: rotate(60deg);
	width: 120px;
}

.bicycle-container .head-tube-post {
	right: calc(120px / 2);
	transform-origin: right;
	transform: rotate(60deg);
	width: 140px;
	background: #0e130f;
	z-index: 1;
	height: calc(5px - 1px);
}

.bicycle-container .saddle {
	position: absolute;
	margin: auto;
	top: 20px;
	left: 85px;
	width: 50px;
	height: 10px;
	border-top-left-radius: 50%;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 50%;
	background: #151515;
	z-index: 2;
}

.bicycle-container .handlebars {
	position: absolute;
	margin: auto;
	top: 25px;
	right: calc(100px / 2 + 25px);
	width: 30px;
	height: 30px;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	border-top: 5px solid #14dc57;
	border-right: 5px solid #14dc57;
	border-bottom: 5px solid #14dc57;
	z-index: 2;
}

.ground-container {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 550px;
	height: 200px;
	overflow: hidden;
}

.ground-container .ground {
	position: absolute;
	margin: auto;
	animation: mv infinite linear;
	background: #1a3116;
	z-index: -1;
}

.ground-container .ground1 {
	bottom: 0;
	right: -150px;
	width: 100px;
	height: 4px;
	border-radius: 10px;
	animation-duration: 3s;
	z-index: 5;
}

.ground-container .ground1:before {
	content: "";
	position: absolute;
	margin: auto;
	top: -60px;
	left: 150px;
	width: 30px;
	height: 20px;
	border-top-right-radius: 60%;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 20%;
	background: #351919;
}

.ground-container .ground2 {
	bottom: 70px;
	right: -250px;
	width: 100px;
	height: 2px;
	border-radius: 10px;
	animation-duration: 4s;
}

.ground-container .ground2:before {
	content: "";
	position: absolute;
	margin: auto;
	top: -30px;
	left: 200px;
	width: 10px;
	height: 10px;
	border-top-right-radius: 60%;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 20%;
	background: #351616;
}

.ground-container .ground3 {
	top: 50px;
	right: -300px;
	width: 100px;
	height: 2px;
	border-radius: 10px;
	animation-duration: 5s;
}

.ground-container .ground3:before {
	content: "";
	position: absolute;
	margin: auto;
	top: 10px;
	left: -100px;
	width: 10px;
	height: 5px;
	border-top-right-radius: 60%;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 20%;
	background: #442323;
}

@keyframes rt {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes mv {
	100% {
		right: 900px;
	}
}

OUTPUT

See also  Minimal Customizable CSS Framework - Skelet.css

Examples:

Weather Animated Icon using HTML and CSS

Bouncing Ball using HTML and CSS

SnowFall Animation Using HTML and CSS

Leave a Reply

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