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 {

        transform: scale(-1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 

                   translate(0.09375em, 0.15625em);

    }

    .pfshFish-body .pfshScale.-pfshBottom.-pfshFront {

        transform: scale(1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 

                   translate(0.09375em, 0.15625em);

    }

    .pfshFish-body .pfshScale.-pfshBottom.-pfshBack {

        transform: scale(-1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) 

                   translate(0.09375em, 0.15625em);

    }


The 'scale(-1, -1)' does the reflection.


In the above, the triangles are rotated a little around the 'y' axis to make the body fatter in the middle.


The triangles are also reflected around the 'z' axis to make the other side of the body of the fish:


    .pfshFish-body > .pfshHalf.pfshRight {

        transform: scaleZ(-1) translateZ(-1px);

    }


There is an animation that explains CSS triangles at:


    'css-tricks.com/animation-css-triangles-work/'


CSS triangles are also use for the tail:


    .pfshFish-tail > .pfshScale {

        width: 0;

        height: 0;

        border-width: 0 0 2.5em 1.875em;

    }


    @keyframes fishColor {

      0% {

        border-color: transparent transparent #6C99C6 transparent;


    .pfshFish-tail > .pfshScale.-pfshTop {

        transform: scale(-1, 1);

    }

    .pfshFish-tail > .pfshScale.-pfshBottom {

        transform: scale(-1, -1);

    }


The bubbles are made with a large border radius


    .blowing-bubbles .bubble:nth-child(1) {

        border-top: 1px solid #AFD2F7;

        border-radius: 100%;


I colored the triangles to see how the animation works. See this at:


      'codepen.io/Bert-Beckwith/pen/YPXRMJz'


My final version is at:


    'codepen.io/Bert-Beckwith/pen/dPoMaZv'


I use JavaScript to do the random bits rather than use a CSS pre-processor as I may want to run the animation several times with different sizes and colors.





Comments

Popular posts from this blog

Running minifiers twice

Using 'JSMin' to remove commented-out code from JavaScript

Coding in small steps can be boring