CSS3 Animated Emoticons | Lessoncup Programming Blog

Saturday, 12 October 2013

CSS3 Animated Emoticons

I started work on CSS3 EMOTICONS animations and i did one with pure css3.we have to use few properties to make this kind of animaitons like -webkit-animation , @-webkit-keyframes and -webkit-transform and mange the things as per our face feeling requirements. let's see how we do simple animations wtih CSS3.




Let's Start

CSS

here we will work on various css3 properties like border-radius for rounded corners and manage the radius with top,bottom,right and left corners for different shapes like EYE,NOSE and mouth and other things.
#emoticons{ width:650px; height:auto; padding:30px; border:solid #EDFCFC 1px; margin:0 auto;}


#emoticons ul{list-style:none; margin:0; padding:0;}

#emoticons li {
        vertical-align:top;
        text-align:center;
    }
 
#emoticons figure {width:200px;height:200px; background-color:#093; margin:0 auto;
box-shadow:inset -10px -30px  rgba(0,0,0,.08);
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        border-radius:100%;
        }


.bounce { -webkit-animation:bounce 2s infinite; }
        @-webkit-keyframes bounce {
            20%{ -webkit-transform:translateY(-10px); }
            15%,50%{ -webkit-transform:rotateX(20deg); }
  }
  
.eye {
        display:inline-block;
  margin-top:50px;
        width:10px;
        height:15px;
  padding:5px;
        background:rgba(0,0,0,.9);
        border-radius:10px;
        border-radius:100%;
        -webkit-animation:eyeblink 2s ease-in infinite;
    }
 
 .mouth{display: block;
width: 100px;
height: 50px;
margin: 5px auto 0;
background-color:#000;
border-radius: 10px 10px 100px 100px;
border-radius: 10px 10px 50% 50%;
-webkit-animation:mouthan 5s ease-in infinite;
}
 
 
@-webkit-keyframes mouthan {20%{ -webkit-transform:translateY(10px); }
            15%,50%{ -webkit-transform:translateX(20); }}

@-webkit-keyframes eyeblink { 70% { -webkit-transform:none; } 85% { -webkit-transform:rotateX(90deg); } }


#title{margin:0 auto; width:590px; padding:30px;}

h1{font-family:Tahoma, Geneva, sans-serif; color:#09C; font-weight:normal; margin:0 auto;}

.shadow {height:20px;width:20%;border-radius:100%;  margin:-15px 0 0 45%;background:rgba(0,0,0,.1);}

.teath{width: 15px;
height:15px;
margin:.02em auto 0;
background-color:#F00;
box-shadow:inset -5px -4px  rgba(0,0,0,.08);
}

HTML

Hare we used HTML5 figure property to place the cartoon elements and added the bounce class to bounce the cartoon.
<div id="emoticons">
<ul>
<li>
<figure class="bounce">
<div class="eye"></div>
<div class="eye"></div>
<div class="moustache"></div>
<div class="mouth ">
<div class="teath"></div>
</div>
</figure>
</li>
</ul>
<div class="shadow"></div>
</div>


Live Demo

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons