Animated Recycle with Open Close Style using CSS3

CSS3 has some awesome techniques, let have do some form using transition property.

Have a look

Mouse hover on Recile Bin

Another example in table format mouse hover on last bin icon to see the cool animated effect

Language Name	How to say hello	Delete
Assamese	নমস্কাৰ (nomoskaar)
Bengali	নমস্কার (nômoshkar)
Gujarati	નમસ્તે (namaste)
Hindi	नमस्ते (namaste) नमस्कार (namaskār)
Kannada	ನಮಸ್ತೆ (namaste)
Malayalam	നമസ്തെ (namaste)
Oriya	ନମସ୍କର (namascara)
Punjabi	ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ। / ست سِری اَکال (sat srī akāl)
Tamil	வணக்கம் (vaṇakkam)

How it works:

Basically there are 3 div tag, A parent div tag will hold 2 child div.

1. Parent div for trash holder
2. Can div
3. Lid div

See the below to check with with border style, you can get more idea by this

So lets create CSS3 to get the animated recile bin icon.
See the Below Code :

<div class="trash" title="Remove"><span class="lid"></span><span class="can"></span></div>

You can see that there is a div tag with "trash", and two child div tag one with has "lid" class and second has "can" class
Now apply below CSS3 code to make it animated

.trash{transition:opacity 200ms;width:128px;height:128px;opacity:0.8;position:relative;right:0;top:3px;vertical-align:middle;cursor:pointer;margin:50px auto 10px}  
 .trash > .lid{transform-origin:19% 100%;transition:transform 150ms;height:28px;width:128px;-webkit-transform-origin:-7% 100%}  
 .trash > .can{background-position:0 -30px!important;width:128px;height:97px;margin:30px 0 0;padding:0!important}  
 .trash > .can,.trash > .lid{background:url(img/RecycleBin.png) 0 0 no-repeat;position:absolute;right:8px;top:2px;-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 250ms}  
 .trash > .can:hover{border:none!important;box-shadow:none!important}  
 .trash > span{display:inline-block}  
 .trash:focus > .lid,.trash:hover > .lid{transform:rotate(-45deg);transition:transform 250ms;-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 250ms}  

I have tested with Chrome, Firefox, Internet Explorer 11

Click here to download source file from GitHub.

enjoy!
saAction