Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • An Animated Bouncing Smiley Using CSS3

    @vibhuti.sharma
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.27k
    Comment on it

    Hello , readers In today's blog I have tried to create An Animated Bouncing Smiley using CSS3 properties.

    As looking over the smiley , firstly I have to collect all the elements that can help me in creating the smiley. The elements which can be include are eyes , the eyebrows , the center eye ball , the pupil , mouth and the tongue.

    Now for creating a smiley I need to create a div with a class name as “smiley” with a number of nested divs comprising of various elements.

    I have also added some animation effect to the smiley such as blinking of eyes , movement of pupil , movement in tongue and bouncing movement of the smiley.

    Below is the html code for creating the smiley :-

    <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Animated Smiley Face</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

<section class="container">

<div class="smiley"> <!-- Smiley -->

<div id="shine"> <!-- Shine -->

<div class="brow"></div> <!-- Eyebrow 1 -->

<div class="brow1"></div> <!-- Eyebrow 2 -->

<div class="eye"> <!-- Eye 1 -->

<div class="ball1"> <!-- Black part -->

<div class="pupil1"></div> <!-- Pupil -->

</div>

</div>

<div class="eye1"> <!-- Eye 2 -->

<div class="ball2"> <!-- Black part -->

<div class="pupil2"> <!-- Pupil -->

</div>

</div>

</div>

<div class="mouth"></div> <!-- Mouth -->

<div class="tongue"></div> <!-- Tongue -->

</div>

</div>

</section>

</body>

</html>

    Now comes the styling part of the smiley , To the smiley I have given the border-radius as 100% , adjusted the height and width , set the background-color, created box-shadow around the smiley , make position set to relative and the background-clip as padding-box .

     

    To the smiley I  also need to apply animation over it with name as bounce , with a duration for 1s , iteration-count to 100 and adjusted its direction to alternate . I have also used @keyframe property for bouncing the smiley.

     

    I have also tried to give shine over the smiley by using linear-gradient as background-image and adjusted the height and width .

     

    Next , now for creating the two eyes I need to set the border-radius , height, width , position , background-color and the border-bottom.

     

    I have also added animation effect to the eyes with the name as eye, with a duration for 4s ,iteration-count to infinite at different browsers.

     

    Now moving to the inner black part to create the two balls , I need to set the position to relative , adjusted its height, width , box-shadow and the border-radius.

     

    Now for creating the pupils , I need to set the position to relative , adjusted the height and the width , provide a background-color and the border-radius .

     

    I have  also applied animation to the eye movement by setting its duration time as 4s and iteration-count to infinite .

     

    Now for creating the eyebrows , I have used transform rotate property  and set the border-bottom-right and left radius with the border-bottom . I also made its position to absolute.

     

    Now for creating the mouth , I need to set the border-bottom- right and left radius , used transform rotate property and made background to transparent. I have set its position to absolute and applied the appropriate height and width.

     

    Now last for creating the tongue , I made its position to absolute , adjusted its height and width , applied the border-bottom-right and left and the background-color .

     

    I have also applied animation effect to the tongue with a duration of 1s, iteration-count to infinite and direction to alternate at various browsers.

     

    I have also used @keyframe property to the tongue for animating its height when moved inward and outward , to the eye I have used transform scale property at various percentages. For the eye movement I have used transform translate property to the X and Y axis at 0 , 25 and 100%.

     

    Below is the CSS code :-

    html {

background: #000; /* Background Color */

overflow:hidden;

}

body

{

text-align:center;

}

/* Container */

.container{

width:820px;

margin:30px auto;

padding:25px;

min-height:400px;

height:auto;

}

.smiley { /* Smiley */

position:relative;

display:inline-block;

top:5px;

width: 285px;

height: 285px;

-moz-border-radius: 100%;

-o-border-radius: 100%;

-webkit-border-radius: 100%;

-ms-border-radius: 100%;

border-radius: 100%;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

-ms-background-clip: padding-box;

-o-background-clip: padding-box;

background-clip: padding-box;

background-color: #3ab983; /* Color */

-moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);

-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);

-o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);

-ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);

box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);

border: 2px solid #000;

cursor: pointer;

/* Animation */

-webkit-animation-name:bounce;

-webkit-animation-duration:1s;

-webkit-animation-iteration-count:100;

-webkit-animation-direction:alternate;

-o-animation-name:bounce;

-o-animation-duration:1s;

-o-animation-iteration-count:100;

-o-animation-direction:alternate;

-ms-animation-name:bounce;

-ms-animation-duration:1s;

-ms-animation-iteration-count:100;

-ms-animation-direction:alternate;

-moz-animation-name:bounce;

-moz-animation-duration:1s;

-moz-animation-iteration-count:100;

-moz-animation-direction:alternate;

animation-name:bounce;

animation-duration:1s;

animation-iteration-count:100;

animation-direction:alternate;

}

@-webkit-keyframes bounce{from{}

to{top:200px;}

}

@-ms-keyframes bounce{from{}

to{top:320px;}

}

@-o-keyframes bounce{from{}

to{top:320px;}

}

@-moz-keyframes bounce{from{}

to{top:320px;}

}

@keyframes bounce{from{}

to{top:320px;}

}

#shine {

width:260px;

height:260px;

background-image: -webkit-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);

background-image: -moz-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);

background-image: -o-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);

background-image: -ms-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);

background-image:linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#0ffffff)";

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#0ffffff);

border-radius:100%;

margin-left:13px;

margin-top:3px;

float:left;

display:inline-block;

}

.eye {

position:relative;

top:70px;

left:40px;

width: 66px;

height: 66px;

-moz-border-radius: 33px;

-webkit-border-radius: 33px;

border-radius: 33px;

-o-border-radius: 33px;

-ms-border-radius: 33px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

-o-background-clip: padding;

-ms-background-clip: padding;

background-clip: padding-box;

background-color: #fff;

-moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

border-bottom: solid 1px #000;


/* animation */

-webkit-animation: eye 4s infinite step-start 0s;

-moz-animation: eye 4s infinite step-start 0s;

-o-animation: eye 4s infinite step-start 0s;

-ms-animation: eye 4s infinite step-start 0s;

animation: eye 4s infinite step-start 0s;

}

.eye1 {

position:absolute;

top:50px;

left:140px;

width: 86px;

height: 86px;

-moz-border-radius: 43px;

-webkit-border-radius: 43px;

border-radius: 43px;

-moz-border-radius: 43px;

-o-border-radius: 43px;

-ms-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background-color: #fff;

-moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);


/* animation */

-webkit-animation: eye 4s infinite step-start 0s;

-moz-animation: eye 4s infinite step-start 0s;

-o-animation: eye 4s infinite step-start 0s;

-ms-animation: eye 4s infinite step-start 0s;

animation: eye 4s infinite step-start 0s;

}

.ball1 { /* Black Part */

position:relative;

width: 46px;

height: 46px;

top:10px;

display:inline-block;

-moz-border-radius: 100%;

-webkit-border-radius: 100%;

-o-border-radius: 100%;

-ms-border-radius: 100%;

border-radius: 100%;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background-color: #000;

-moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

}

.ball2 {

position:relative;

width: 66px;

height: 66px;

top:10px;

display:inline-block;

-moz-border-radius: 100%;

-o-border-radius: 100%;

-webkit-border-radius: 100%;

border-radius: 100%;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background-color: #000;

-moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);

}



.pupil1 {

position:relative;

width: 16px;

height: 16px;

top:10px;

left:10px;

display:inline-block;

-moz-border-radius: 100%;

-webkit-border-radius: 100%;

border-radius: 100%;

-o-border-radius: 100%;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background-color: #fff;


/* animation */

-webkit-animation: eye 4s infinite step-start 0s;

-moz-animation: eye 4s infinite step-start 0s;

-o-animation: eye 4s infinite step-start 0s;

-ms-animation: eye 4s infinite step-start 0s;

animation: eye 4s infinite step-start 0s;

-webkit-animation: emove 4s infinite step-start 0s;

-moz-animation: emove 4s infinite step-start 0s;

-o-animation: emove 4s infinite step-start 0s;

-ms-animation: emove 4s infinite step-start 0s;

animation: emove 4s infinite step-start 0s;

}

.pupil2 {

position:relative;

width: 20px;

height: 20px;

top:20px;

left:-10px;

display:inline-block;

-moz-border-radius: 100%;

-o-border-radius: 100%;

-webkit-border-radius: 100%;

border-radius: 100%;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background-color: #fff;


/* animation */

-webkit-animation: eye 4s infinite step-start 0s;

-moz-animation: eye 4s infinite step-start 0s;

-o-animation: eye 4s infinite step-start 0s;

-ms-animation: eye 4s infinite step-start 0s;

animation: eye 4s infinite step-start 0s;

-webkit-animation: emove 4s infinite step-start 0s;

-moz-animation: emove 4s infinite step-start 0s;

-o-animation: emove 4s infinite step-start 0s;

-ms-animation: emove 4s infinite step-start 0s;

animation: emove 4s infinite step-start 0s;

}

.brow /* eyebrow */

{

display: inline-block;

position:absolute;

right:50px;

top: 25px;

height: 90px;

width: 90px;

background: transparent;

border-bottom-left-radius: 90px;

border-bottom-right-radius: 90px;

border-bottom: solid 6px #000;

-webkit-transform: rotate(165deg);

-moz-transform: rotate(165deg);

-ms-transform: rotate(165deg);

-o-transform: rotate(165deg);

transform: rotate(165deg);

}

.brow1

{

display: inline-block;

position:absolute;

left:40px;

top: 50px;

height: 60px;

width: 60px;

background: transparent;

border-bottom-left-radius: 60px;

border-bottom-right-radius: 60px;

border-bottom: solid 4px #000;

-webkit-transform: rotate(-165deg);

-moz-transform: rotate(-165deg);

-ms-transform: rotate(-165deg);

-o-transform: rotate(-165deg);

transform: rotate(-165deg);

}

.mouth{

position:absolute;

top:130px;

z-index:3;

left:0;

right:0;

height: 85px;

width: 150px;

margin:0 auto;

background: transparent;

border-bottom-left-radius: 85px;

border-bottom-right-radius: 85px;

border-bottom: solid 8px #000;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.tongue{

position:absolute;

top:216px;

left:20px;

z-index:2;

right:0;

height: 0;

width: 40px;

margin:0 auto;

background: #e43; /* tongue color */

border-bottom-left-radius: 25px;

border-bottom-right-radius: 25px;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

transform: rotate(-10deg);

border-bottom: solid 1px #000;

/* animation */

-webkit-animation-name:tongue;

-webkit-animation-duration:1s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

-moz-animation-name:tongue;

-moz-animation-duration:1s;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-o-animation-name:tongue;

-o-animation-duration:1s;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-ms-animation-name:tongue;

-ms-animation-duration:1s;

-ms-animation-iteration-count:infinite;

-ms-animation-direction:alternate;

animation-name:tongue;

animation-duration:1s;

animation-iteration-count:infinite;

animation-direction:alternate;

}

@-webkit-keyframes tongue{

from{}

to{

height: 40px;}

}

@-o-keyframes tongue{

from{}

to{

height: 40px;}

}

@-moz-keyframes tongue{

from{}

to{

height: 40px;}

}

@-ms-keyframes tongue{

from{}

to{

height: 40px;}

}

@keyframes tongue{

from{}

to{

height: 40px;}

}

@-webkit-keyframes eye{

0% {-webkit-transform: scale(1,1);}

2% {-webkit-transform: scale(1,0);}

4% {-webkit-transform: scale(1,0);}

5% {-webkit-transform: scale(1,1);}

100% {-webkit-transform: scale(1,1);}

}

@-o-keyframes eye{

0% {-o-transform: scale(1,1);}

2% {-o-transform: scale(1,0);}

4% {-o-transform: scale(1,0);}

5% {-o-transform: scale(1,1);}

100% {-o-transform: scale(1,1);}

}

}

@-ms-keyframes eye{

0% {-ms-transform: scale(1,1);}

2% {-ms-transform: scale(1,0);}

4% {-ms-transform: scale(1,0);}

5% {-ms-transform: scale(1,1);}

100% {-ms-transform: scale(1,1);}

}

@-moz-keyframes eye{

0% {-moz-transform: scale(1,1);}

2% {-moz-transform: scale(1,0);}

4% {-moz-transform: scale(1,0);}

5% {-moz-transform: scale(1,1);}

100% {-moz-transform: scale(1,1);}

}

@keyframes eye{

0% {transform: scale(1,1);}

2% {transform: scale(1,0);}

4% {transform: scale(1,0);}

5% {transform: scale(1,1);}

100% {transform: scale(1,1);}

}

@-webkit-keyframes emove{

0% {-webkit-transform :}

25% {-webkit-transform :translateY(60%);translateX(20%);}

100% {-webkit-transform :translateX(-30%);}

}
@-ms-keyframes emove{

0% {-ms-transform :}

25% {-ms-transform :translateY(60%);translateX(20%);}

100% {-ms-transform :translateX(-30%);}

}

@-moz-keyframes emove{

0% {-moz-transform :}

25% {-moz-transform :translateY(60%);translateX(20%);}

100% {-moz-transform :translateX(-30%);}

}

@-o-keyframes emove{

0% {-o-transform :}

25% {-o-transform :translateY(60%);translateX(20%);}

100% {-o-transform :translateX(-30%);}

}

@keyframes emove{

0% {transform :}

25% {transform :translateY(60%);translateX(20%);}

100% {transform :translateX(-30%);}

}

    Conclusion :-

    Hence, An Animated Bouncing Smiley is created using CSS3 properties.

    Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

    html css3 Animation transform translate rotation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: