Animating The smiley

In my later post, i showed how to build a smiley using css3’s border-radius property. now let’s animate this cute little smiley 🙂

Here’s the main css code that would animate the smiley.

@keyframes eyes{

    0%{
        width:240px;

    }
    50%{
        width:300px;


    }
    100%{

        width:240px;

    }

}
@keyframes updown{

    0%{top:15%;

        transform:rotate(0deg);
    }
    50%{ top:12px;
        transform:rotate(20deg);}
        100%{
            top:15%;
            transform:rotate(0deg);}

        }

these two keyframe declarations are updown and eyes, these are very familiar to each other but we are changing width of the eyes in eyes keyframe, and transforming from one position to another in keyframe updown.

so the final code would look like : (appending the previous code)

.smiley{

    width:350px;
    height:350px;
    background: yellow;
    border-radius: 200px;
    position: relative;
    top:15%;
    left:20%;
    animation: updown 2s infinite;

}
.eyes {
    position: relative;
    top: 80px;
    width:250px;
    height:100px;
    margin: 0 auto;
    animation: eyes 2s infinite;
}
.le,.re{
    float: right;
    margin: 20px 20px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: gray;
}
.re{
    float:left;
}
.smile {
    position: relative;
    top:110px;
    right:-120px;
    height:45px;
    width:90px;
    border-radius: 0px 0px 90px 90px;
    background: gray;


}
@keyframes eyes{


    0%{
        width:240px;

    }
    50%{
        width:300px;


    }
    100%{

        width:240px;

    }


}
@keyframes updown{

    0%{top:15%;

        transform:rotate(0deg);
    }
    50%{ top:12px;
        transform:rotate(20deg);}
        100%{
            top:15%;
            transform:rotate(0deg);}

        }

and the html structure:

<div class="canvas">
    <div class="smiley">
        <div class="eyes">
            <div class="le"></div>
            <div class="re"></div>
        </div>
            <div class="smile"></div>
    </div>
</div>

 

see it live:

See the Pen JGeMJd by Sarabpreet Singh (@sarabpreet) on CodePen.1330

About the author

sarabpreet

Add comment

By sarabpreet

Latest from Sarabpreet