CSS Fish Animation | CSS Art

Let us learn how to create a simple fish animation using only CSS. We will create a simple design to show how to combine CSS features like keyframes, transforms, and box shadow to create a smooth fish animation. We won't be using any Javascript - just HTML and CSS.

Before starting the tutorial, I want to tell you that this type of CSS art is not used anywhere in reality or can also be used on the loading page of a website. I have made this tutorial here to have fun with CSS properties with you. So let's explore some new aspects of CSS properties.

HTML Editor:

HTML

CSS

JS

Result

HTML

We'll start by creating a div element and giving it the class name "fish". This will serve as the main container for our fish animation. Inside this container, we created another div element with the class name "eye". This element will represent the fish eye and can later be styled and animated using CSS. These two elements together form the basic structure of fish.

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

Are you interested in CSS art? CSS Pig Drawing | CSS Art

Stylesheet (CSS):

Centering the fish:

We will make some basic settings to center the main content of the document body on the screen. For this we are using the flexbox method, which is a convenient way to align items horizontally and vertically.

First we set the display property to flex which turns the body into a flex container. Then using justify-content and align-items we ensure that any elements inside the body are perfectly centered in the middle of the screen.

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 color to simulate a calm underwater environment for the fish animation. Finally, we use overflow so that no element scrollbars appear during the animation, like the animated parts of the fish.

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

Styling the fish body:

Once the document body is set up, we will style the main fish container. We will start the fish with a fixed width and height of 150px which defines the basic shape of the fish body shape.

We will then apply a linear-gradient background that blends two shades of blue at 45 degree angles. This gradient helps give the fish a subtle dimensional look so it looks less flat. We set the transform CSS property to rotate(45deg) to position the fish at an angle. This will give the fish a more dynamic look instead of a static square shape. We also add an inset box-shadow to give some depth to the fish body.

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

Styling the fish tail:

After styling the main fish body, we will create the fish tail using the ":after" pseudo-element. We start by set the content CSS property to an empty string, which helps us create a tail without creating additional HTML elements. We set the bottom CSS property to 100% and the left CSS property to 100% to position the tail at the end of the fish body. This ensures that the tail is attached to the back of the body.

To maintain proportionality, we give the tail the same width and height as the fish body. For the background, we use a linear-gradient CSS property that blends a solid blue color with transparency. This creates a simple pattern that separates the tail from the main body. Finally, we apply an animation called tail. This animation runs infinitely at a linear speed of 1second.

.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;
}

Styling the fish eye:

We will style the fish eye so that it stands out clearly as a small round shape on the fish body. First, we set the width and height properties to 30px to give the eye a perfectly round shape. Then the background color is set to black (hex code #000) and the border-radius CSS property is set to 50% so that the eye looks perfectly round. To properly position the eye on the fish body, we use the margin-top CSS property to 60% and the margin-left property to 8%. These values place the eye on the top and left sides of the fish.

For additional visual detail, we apply a CSS box-shadow property. The first part is an inset white ring (inset 0 0 0 8px #fff) that gives the eye some depth. The second part (4px -2px 0 6px #8da6ff) adds a subtle outer blue glow.

.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;
}

Setting Up the Keyframes:

Now we will create a simple animation for the fish tail using a keyframe called "tail". The animation creates a gentle movement over time by controlling the width of the tail.

Initially when the keyframe is 0% we will set the tail width to 150px. Then when the keyframe is 50% in the middle of the animation, I'll increase the width from 200px. When the keyframe is 100%, set the width to 150px and complete the animation cycle.

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