Really clever napkin animation waves effects with element Scalling using only CSS and HTML. Demo and download available.
HTML Snippet
<div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>CSS Code
body { align-items: center; background-color: black; display: flex; height: 100vh; justify-content: center; margin: 0; } .row { display: flex; } .column { -webkit-animation: 1s infinite linear napkin; animation: 1s infinite linear napkin; background-color: #9966cc; border-radius: 50%; -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); flex: none; height: 5vh; -webkit-transform-origin: 50% 25%; transform-origin: 50% 25%; width: 5vh; } .row:nth-child(1) .column:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(1) .column:nth-child(2) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(1) .column:nth-child(3) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(1) .column:nth-child(4) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(1) .column:nth-child(5) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(1) .column:nth-child(6) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .row:nth-child(1) .column:nth-child(7) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .row:nth-child(1) .column:nth-child(8) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .row:nth-child(1) .column:nth-child(9) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .row:nth-child(1) .column:nth-child(10) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .row:nth-child(2) .column:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(2) .column:nth-child(2) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(2) .column:nth-child(3) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(2) .column:nth-child(4) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(2) .column:nth-child(5) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(2) .column:nth-child(6) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(2) .column:nth-child(7) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .row:nth-child(2) .column:nth-child(8) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .row:nth-child(2) .column:nth-child(9) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .row:nth-child(2) .column:nth-child(10) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .row:nth-child(3) .column:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(3) .column:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(3) .column:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(3) .column:nth-child(4) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(3) .column:nth-child(5) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(3) .column:nth-child(6) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(3) .column:nth-child(7) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(3) .column:nth-child(8) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .row:nth-child(3) .column:nth-child(9) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .row:nth-child(3) .column:nth-child(10) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .row:nth-child(4) .column:nth-child(1) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(4) .column:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(4) .column:nth-child(3) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(4) .column:nth-child(4) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(4) .column:nth-child(5) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(4) .column:nth-child(6) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(4) .column:nth-child(7) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(4) .column:nth-child(8) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(4) .column:nth-child(9) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .row:nth-child(4) .column:nth-child(10) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .row:nth-child(5) .column:nth-child(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(5) .column:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(5) .column:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(5) .column:nth-child(4) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(5) .column:nth-child(5) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(5) .column:nth-child(6) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(5) .column:nth-child(7) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(5) .column:nth-child(8) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(5) .column:nth-child(9) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(5) .column:nth-child(10) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .row:nth-child(6) .column:nth-child(1) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .row:nth-child(6) .column:nth-child(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(6) .column:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(6) .column:nth-child(4) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(6) .column:nth-child(5) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(6) .column:nth-child(6) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(6) .column:nth-child(7) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(6) .column:nth-child(8) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(6) .column:nth-child(9) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(6) .column:nth-child(10) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .row:nth-child(7) .column:nth-child(1) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .row:nth-child(7) .column:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .row:nth-child(7) .column:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(7) .column:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(7) .column:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(7) .column:nth-child(6) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(7) .column:nth-child(7) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(7) .column:nth-child(8) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(7) .column:nth-child(9) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(7) .column:nth-child(10) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .row:nth-child(8) .column:nth-child(1) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .row:nth-child(8) .column:nth-child(2) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .row:nth-child(8) .column:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .row:nth-child(8) .column:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(8) .column:nth-child(5) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(8) .column:nth-child(6) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(8) .column:nth-child(7) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(8) .column:nth-child(8) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(8) .column:nth-child(9) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(8) .column:nth-child(10) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .row:nth-child(9) .column:nth-child(1) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .row:nth-child(9) .column:nth-child(2) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .row:nth-child(9) .column:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .row:nth-child(9) .column:nth-child(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .row:nth-child(9) .column:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(9) .column:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(9) .column:nth-child(7) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(9) .column:nth-child(8) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(9) .column:nth-child(9) { -webkit-animation-delay: 0s; animation-delay: 0s; } .row:nth-child(9) .column:nth-child(10) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .row:nth-child(10) .column:nth-child(1) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .row:nth-child(10) .column:nth-child(2) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .row:nth-child(10) .column:nth-child(3) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .row:nth-child(10) .column:nth-child(4) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .row:nth-child(10) .column:nth-child(5) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .row:nth-child(10) .column:nth-child(6) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .row:nth-child(10) .column:nth-child(7) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .row:nth-child(10) .column:nth-child(8) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .row:nth-child(10) .column:nth-child(9) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .row:nth-child(10) .column:nth-child(10) { -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes napkin { 50% { background-color: rebeccapurple; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes napkin { 50% { background-color: rebeccapurple; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }Preview
Leave a Reply