<div class="box" 
     data-anijs="if: click,
                 do: $toggleClass orange"></div>
<div class="box second" data-anijs="if: click, do: $toggleClass red, to: $children">
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
  <span class="shells"></span>
</div>
<div class="box" data-anijs="if: click, on: .shells, do: $toggleClass yellow, to: $parent target; if: click, on: .shells, do: $toggleClass yellow, to: $parent"></div>
body {
  margin: 80px auto;
  width: 600px;
  border: 10px solid black;
  text-align: center;
  padding: 50px 0;
  transition: 0.5s all;
  background: red;
}

body.yellow {
  border-radius: 50% 10%/10% 50%;
  background: yellow;
}

.box.yellow {
  border-radius: 50% 10%/10% 50%;
  background: yellow;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: black;
  display: inline-block;
  margin: 10px;
  transition: 0.5s all;
}

.orange {
  background: orange;
}

.box.second {
  padding: 50px 20px;
  border: 2px solid black;
}

span.shells {
  border: 2px solid red;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 4px;
  transition: 0.5s all;
}

span.shells.red {
  background: red;
  border-radius: 0;
  transform: rotateZ(30deg);
}

External CSS

  1. https://anijs.github.io/lib/anicollection/anicollection.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://anijs.github.io/lib/anijs/anijs-min.js
  3. https://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js