Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Hits:

Popular articles

Related Articles

Really clever CSS napkin animation waves effects

Really clever CSS napkin animation waves effects

Really clever napkin animation waves effects with element Scalling using only CSS and HTML. Demo and download available.

Demo Download

Author Indrek Paas
Hits
Created SEPTEMBER 20, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

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

Really clever CSS napkin animation waves effects preview

Advertisement