Cool animation effects using CSS balance animation effects CSS

Creative CSS Effects | April 25, 2022

Today in this blog you’ll learn how to create balance animation effects. We used HTML and CSS to create this balance animation effect.

Video tutorial of CSS balance animation effects

This tutorial video can help you to create CSS balance animation effects

CSS balance animation effects [Source Codes]

This source code can help you to create

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="wrapper">
	<div class="stick">
		<div class="ball"></div>
	</div>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	color: #000;
}

.wrapper{
	display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.stick {
  width: 600px;
  height: 25px;
  background: #00b9ff;
  border-radius: 30px;
  position: relative;

  transform: rotate(-25deg);
  animation: stickUpDown 4s ease-in-out 1s infinite alternate;
  
}
.ball {
  position: absolute;
  bottom: 100%;
  left: calc(100% - 90px);
  width: 150px;
  height: 150px;
  background: #f75b00;
  border-radius: 50%;
  
  animation: ballMoving 4s ease-in-out 1s infinite alternate;
}
.ball:after {
  position: absolute;
  content: '';
  top: 75px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #FFF;
  border-radius: 50%;
}

.ball:before {
  position: absolute;
  content: '';
  top: 75px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #FFF;
  border-radius: 50%;
}

@keyframes stickUpDown {
  from {transform: rotate(-25deg);}
  to {transform: rotate(25deg);}
}
@keyframes ballMoving {
  from {left: calc(100% - 90px); transform: rotate(360deg);}
  to {left: calc(0% - 60px); transform: rotate(0deg);}
}