How a CSS fish animation works

I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See: 'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles: .pfshFish-body .pfshScale { width: 0; height: 0; border-width: 0 0 3.125em 6.25em; @keyframes fishColor { 0% { border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish: .pfshFish-body .pfshScale.-pfshTop.-pfshFront { transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(0.09375em, 0.15625em); } .pfshFish-body .pfshScale.-pfshTop.-pfshBack...