<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Infinite squares</title>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.main {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:120px;
height:120px;
animation:rot 6s linear infinite;
}
.main div {
position: absolute;
top:0px;
left:0px;
width:40px;
height:40px;
background-color:#8e44ad;
animation-direction: reverse;
}
.st {
animation:fade 4s linear infinite;
}
.main .t{
top:0px;
}
.main .rm{
top:40px;
}
.main .b{
top:80px;
}
.main .l{
left:0px;
}
.main .m{
left:40px;
}
.main .r{
left:80px;
}
.mm {
background-color:#8e44ad;
position: absolute;
top:60px !important;
left:60px !important;
transform:translate(-50%,-50%) !important;/**/
animation:main 2s linear infinite;
}
.tl {
animation:fadetl 2s linear infinite;
border-top-left-radius:20px;
}
.tm {
animation:fadetm 2s linear infinite;
}
.tr {
animation:fadetr 2s linear infinite;
border-top-right-radius:20px;
}
.ml {
animation:fademl 2s linear infinite;
}
.mr {
animation:fademr 2s linear infinite;
}
.bl {
animation:fadebl 2s linear infinite;
border-bottom-left-radius:20px;
}
.bm {
animation:fadebm 2s linear infinite;
}
.br {
animation:fadebr 2s linear infinite;
border-bottom-right-radius:20px;
}
@keyframes rot {
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
@keyframes main {
0% {
width:40px;
height:40px;
border-radius:0px;
}
10% {
border-radius:0px;
}
100% {
width:120px;
height:120px;
border-radius:20px;
}
}
@keyframes fadetl {
0% {
opacity:1;
top:0px;
left:0px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:-80px;
left:-80px;
}
}
@keyframes fadetm {
0% {
opacity:1;
top:0px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
top:-80px;
}
}
@keyframes fadetr {
0% {
opacity:1;
top:0px;
left:80px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:-80px;
left:160px;
}
}
@keyframes fademl {
0% {
opacity:1;
left:0px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
left:-80px;
}
}
@keyframes fademr {
0% {
opacity:1;
left:80px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
left:160px;
}
}
@keyframes fadebl {
0% {
opacity:1;
top:80px;
left:0px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:160px;
left:-80px;
}
}
@keyframes fadebm {
0% {
opacity:1;
top:80px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
top:160px;
}
}
@keyframes fadebr {
0% {
opacity:1;
top:80px;
left:80px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:160px;
left:160px;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="main">
<div class="st tl t l"></div>
<div class="st tm t m"></div>
<div class="st tr t r"></div>
<div class="st ml rm l"></div>
<div class="mm rm m"></div>
<div class="st mr rm r"></div>
<div class="st bl b l"></div>
<div class="st bm b m"></div>
<div class="st br b r"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dev.finnthewebdesigner.com/pentitle.js'></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/z-/infinite-squares-pJjOGW */
.main {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:120px;
height:120px;
animation:rot 6s linear infinite;
}
.main div {
position: absolute;
top:0px;
left:0px;
width:40px;
height:40px;
background-color:#8e44ad;
animation-direction: reverse;
}
.st {
animation:fade 4s linear infinite;
}
.main .t{
top:0px;
}
.main .rm{
top:40px;
}
.main .b{
top:80px;
}
.main .l{
left:0px;
}
.main .m{
left:40px;
}
.main .r{
left:80px;
}
.mm {
background-color:#8e44ad;
position: absolute;
top:60px !important;
left:60px !important;
transform:translate(-50%,-50%) !important;/**/
animation:main 2s linear infinite;
}
.tl {
animation:fadetl 2s linear infinite;
border-top-left-radius:20px;
}
.tm {
animation:fadetm 2s linear infinite;
}
.tr {
animation:fadetr 2s linear infinite;
border-top-right-radius:20px;
}
.ml {
animation:fademl 2s linear infinite;
}
.mr {
animation:fademr 2s linear infinite;
}
.bl {
animation:fadebl 2s linear infinite;
border-bottom-left-radius:20px;
}
.bm {
animation:fadebm 2s linear infinite;
}
.br {
animation:fadebr 2s linear infinite;
border-bottom-right-radius:20px;
}
@keyframes rot {
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
@keyframes main {
0% {
width:40px;
height:40px;
border-radius:0px;
}
10% {
border-radius:0px;
}
100% {
width:120px;
height:120px;
border-radius:20px;
}
}
@keyframes fadetl {
0% {
opacity:1;
top:0px;
left:0px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:-80px;
left:-80px;
}
}
@keyframes fadetm {
0% {
opacity:1;
top:0px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
top:-80px;
}
}
@keyframes fadetr {
0% {
opacity:1;
top:0px;
left:80px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:-80px;
left:160px;
}
}
@keyframes fademl {
0% {
opacity:1;
left:0px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
left:-80px;
}
}
@keyframes fademr {
0% {
opacity:1;
left:80px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
left:160px;
}
}
@keyframes fadebl {
0% {
opacity:1;
top:80px;
left:0px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:160px;
left:-80px;
}
}
@keyframes fadebm {
0% {
opacity:1;
top:80px;
}
10% {
opacity:1;
}
80%,100% {
opacity:0;
top:160px;
}
}
@keyframes fadebr {
0% {
opacity:1;
top:80px;
left:80px;
}
10% {
opacity:1;
}
80% {
opacity:0;
}
90%,100% {
opacity:0;
top:160px;
left:160px;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
