HTML and CSS Fish Animation Tutorial

Let us learn how to create a fish Draw using only CSS. Today we will create a piece of CSS art using only HTML and CSS. Here we will not use any JavaScript.

What you will learn

How to draw a fish with only one div element?
How to animate a fish tail using keyframes?
How to use CSS properties like transform and box shadow to draw?

The confession

I just want to tell you that today’s CSS fish art isn’t really used anywhere in real-world projects. If you are creating a fish tank, then today's post is for you. Just kidding.

I created this CSS fish animation to have fun with CSS properties. So let's explore some new aspects of CSS properties.

What the finished fish animation looks like:

Before you get started, here's a preview of what your fish will look like when finished. Click the run code button to see:

Prerequisites for today's tutorial:

Today's tutorial might seem strange to a non-web developer. So for your first coding journey, start by Structuring HTML.

Here are the things you need to know for the fish drawing:

Very basic understanding of HTML and CSS.

Step 1: Set Up the Basic Structure

To create a fish, you can start with simple HTML. This includes a DOCTYPE declaration, defining head and body sections, and using meta tags.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Fish Animation</title>
    <style>
      /* CSS is below */
    </style>
  </head>
  <body>
    <!-- HTML is below -->
  </body>
</html>

Step 2: Create the Fish Structure

Now these two elements together form the basic structure of fish.

<div class="fish">
    <div class="eye"></div>
</div>

We will start by creating a <div> element with the class name fish. This will be the main container for our fish. Inside this container, we will create another <div> element with the class name eye. We will use this element to draw the fish eye.

Now let us look at drawing a fish. We'll break it down into a few steps. First, we'll draw the body of the fish, then the eyes, and finally the tail. The process is identical to how we drew the CSS pig.

Step 3: Center the scene

We are using the flexbox method for centering, which aligns items horizontally and vertically.

First, we set the display property to flex, which makes the body a flex container. Then using justify-content and align-items, we ensure that any elements inside the body are perfectly centered on the screen.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7fc3ff;    
    height: 100vh;
    overflow: hidden;
}

We set the height property to 100vh so that the body always occupies the full height of the browser window. The background is set to a light blue (hex code #7fc3ff).

Finally, we use overflow so that no element scrollbars are visible during the fish animation.

Step 4: Build the fish body

Here we will draw the main body of the fish. The fish body is given a width and height of 150 pixels.

.fish{
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #4d68cb 40%, #5f82ff 60%);
    transform: rotate(45deg);
    box-shadow: inset -5px -15px 0px 0px #3a55b5;
}

Next, a linear-gradient has been applied to the background of the fish body, creating two shades of blue mixed at a 45-degree angle.

We want the body to be shaped like a pomfret fish, so we set a transform CSS property to 45 degrees.

Step 4: Adding the tail

Here, the tail is created using the :after pseudo-element.

.fish:after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 100%;
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #4058af 25%, transparent 25%);
    animation: tail 1s linear infinite;
}

First, we set the content CSS property to an empty string, which allows us to create a tail without creating additional HTML elements. We give the tail the same width and height as the fish body and use the linear-gradient CSS property for the background.

Finally, we apply a tail animation that runs infinitely at a linear speed of 1 second.

Step 4: Draw the Fish eye

First, we set the eye to a width and height of 30px. Then we set the background color to black (hex code #000) and set the border-radius CSS property to 50% so that the eye is perfectly round.

To properly position the eye on the fish body, we set the margin from the top to 60% and the margin from the left to 8%.

.eye {
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    margin-top: 60%;
    margin-left: 8%;
    box-shadow: inset 0 0 0 8px #fff, 4px -2px 0 6px #8da6ff;
}

We apply a CSS box-shadow property. The first part of the CSS box-shadow property is an inset white ring that gives the eye some depth. And the second part adds a subtle outer blue glow.

Step 5: Animate the tail

Here is a tail animation created using keyframes. The animation creates a gentle movement in the fish tail.

@keyframes tail {
  0% {
    width: 150px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 150px;
  }
}

When the keyframe is at 0%, the tail width is set to 150px. Then when the keyframe is at 50% in the middle of the animation, the width is increased to 200px.

When the keyframe is at 100%, the width is reduced to 150px (original size).

This keyframe increases and decreases the width of the tail element by 50px, creating the illusion of a fish tail moving.