Creating a CSS‑Only Animated Orange Cat with Vite and SCSS

Introduction

In this article we use Vite + SCSS to create a creative animation that shows an orange cat’s mood changes. The logic is implemented entirely with CSS, allowing you to learn various CSS animation and drawing techniques.

Setup and Structure

First we install the required tools:

yarn add vite sass sass-loader

We then write the HTML structure. div#app fills the whole screen, while div.warrper serves as the main circular container. Inside the circle we place div.sun , div.cloud , and div.cat . The cat’s ears are created with two pseudo‑elements forming triangles.

Variables and UI

:root{
    --bgColor:rgb(81,136,168);
    --eyeHideTop:0px;
    --cloudLeft:45%;
    --mouthRadius:10px 10px 0 0;
}
#app{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:repeating-linear-gradient(...);
}
.warrper{
    width:320px;
    height:320px;
    border-radius:50%;
    border:10px solid white;
    position:relative;
    overflow:hidden;
    background-color:var(--bgColor);
    transition:background-color 1s linear;
    cursor:url("./assets/fish.png"),default;
    &:hover{
        --bgColor:rgb(178,222,247);
        --eyeHideTop:-20px;
        --cloudLeft:100%;
        --mouthRadius:0 0 10px 10px;
    }
}

The variables control the sky color, eye‑lid position, cloud offset, and mouth border‑radius. When the mouse hovers over .warrper , these values change to make the sky brighter, clouds disappear, and the cat appear happy.

Sun and Cloud

.sun{
    width:50px;
    height:50px;
    position:absolute;
    background-color:rgb(255,229,142);
    border:7px solid rgb(253,215,91);
    border-radius:50%;
    left:55%;
    top:14%;
    box-shadow:0 0 6px rgb(255,241,48);
}
.cloud{
    width:100px;
    height:36px;
    background-color:white;
    position:absolute;
    left:var(--cloudLeft);
    top:23%;
    border-radius:36px;
    transition:left .6s linear;
    animation:bouncy 2s ease-in-out infinite;
    &::before{...}
    &::after{...}
}
@keyframes bouncy{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}

The sun is a simple circle with a box‑shadow to simulate glow. The cloud is a rounded rectangle with two pseudo‑elements (large and small circles) to resemble a fluffy cloud, and it animates with a subtle scaling effect.

Cat and Animation

.cat{
    width:180px;
    height:160px;
    background-color:$cat;
    position:absolute;
    bottom:-20px;
    left:50%;
    margin-left:-90px;
    animation:wait 2s ease-in-out infinite;
    &::after,&::before{...}
    .eye{...}
    .nose{...}
    .mouth{...}
}
@keyframes wait{
    0%{bottom:-20px;}
    50%{bottom:-25px;}
    100%{bottom:-20px;}
}

The cat is built from pseudo‑elements: two ears, a pair of eyes, a nose, and a mouth with tiny teeth. Eyes use overflow:hidden and additional pseudo‑elements to create white, black, and highlight circles. The mouth’s border‑radius is animated on hover to switch between a smile and a neutral expression.

Conclusion

By combining absolute positioning, CSS variables, pseudo‑elements, transitions, and keyframe animations, we achieve a fully interactive, JavaScript‑free cat animation. The final demo can be viewed on CodePen at https://codepen.io/jsmask/full/ZEJJZRj . This example is aimed at beginners to practice fundamental CSS skills and spark creative ideas.