<div></div>
<div></div><script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
* {
* {margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {display: flex;
justify-content: center;
align-items: center;
background: #eaeaea;
}
div {display: inline-block;
background: #fff;
box-shadow: 0 2px 1px #aaa;
animation: shapes 3s ease-in-out infinite;
}
shapes {
0% {
border-radius: 50%;
width: 48px;
height: 48px;
}
50% {
border-radius: 5px;
width: 128px;
height: 128px;
}
75% {
border-radius: 2px;
width: 256px;
height: 256px;
}
100% {
border-radius: 50%;
width: 48px;
height: 48px;
}
}