I love to learn new things about coding! This is a geometrical animation project that I worked on grade 12 while I was exploring more about HTML & CSS programming. The following coding is for the animation that you see in the video, multiple squares spinning with different time delays and colors. Copy it into a text editor and save with html file extent. When you open it (double click on), it will start playing the animation. Enjoy it! I learned it through others knowledge sharing and I hope you will learn from mine.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>spinning squares</title>
<style>
html,
body {
width: 100%;
height: 100%;
background: lightblue;
overflow: hidden;
margin: 0;
padding: 0;
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% – 100px), calc(-50% – 100px));
}
.container.x1 {
margin-left: 150px;
}
.container.x1 div{
tranform-origin: top right;
}
.container.x2 {
margin-top: 150px;
}
.container.x2 div{
tranform-origin: bottom left;
}
.container.x3 {
margin-top: 150px;
margin-left: 150px;
}
.container.x3 div{
tranform-origin: bottom right;
}
.container.x4 div{
tranform-origin: top left;
}
.container div{
position: absolute;
top: 0;
left:0;
width: 110px;
height: 110px;
animation: 4s rotate cubic-bezier(0, 0.8, 0.9, 0.5) infinite;
}
.container .white{
background: grey;
border: 2px solid white;
z-index: 5;
animation: 4s rotate cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite, 4s color cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite;
}
.container .red{
border: 2px solid red;
animation-delay: 0.04s;
}
.container .green{
border: 2px solid green;
animation-delay: 0.06s;
}
.container .yellow{
border: 2px solid yellow;
animation-delay: 0.08s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(160deg) scale(1.2);
}
90% {
transform: rotate(360deg) scale(1.4);
}
100% {
transform: rotate(360deg);
}
}
@keyframes color {
0% {
background: grey;
}
10% {
background: grey;
}
20% {
background: lightgreen;
}
30% {
background: lightblue;
}
80% {
background: darkpink;
}
90% {
background: lightpink;
}
100% {
background: darkgrey;
}
}
</style>
</head>
<body>
<div class=”main”>
<div class=”container x1″>
<div class=”white”></div>
<div class=”red”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>
<div class=”main”>
<div class=”container x2″>
<div class=”white”></div>
<div class=”red”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>
<div class=”main”>
<div class=”container x3″>
<div class=”white”></div>
<div class=”red”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>
<div class=”main”>
<div class=”container x4″>
<div class=”white”></div>
<div class=”red”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>
</div>
</body>
</html>
123 CODING WITH ME 