A CodePen by Christopher S.. Animated envelope - Only CSS envelope that opens on hover and a letter comes out. Inspired by http://www.icondeposit.com/theicondeposit:129

index.html

<div class="envelope">
  <div class="icon-envelope"></div>
  <div class="header"></div>
  <div class="letter"></div>
</div>

style.scss

@import "compass";
html {
/*
* Prototype background.
*/
background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
background: -moz-linear-gradient(-90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
background: -o-linear-gradient(-90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
background: linear-gradient(-90deg, rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), linear-gradient(-90deg, #aaa 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px), linear-gradient(#aaa 1px, transparent 1px), #f2f2f2;
				background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.envelope {
  position: relative;
  width: 240px;
  height: 0px;
  margin: 200px auto;
.icon-envelope {
  z-index: 1;
  position: relative;
  width: 240px;
  height: 45px;
  background-color: #40BAA5;
  box-shadow: 0px 5px 0px #36897F;
  &:before {
    z-index: 1;
    position: absolute;
    display: block;
    content: '';
    top: -75px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 75px 0 0 120px;
    border-color: transparent transparent transparent #40BAA5;
  }
  &:after {
    z-index: 1;
    display: block;
    content: '';
    position: absolute;
    top: -75px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 75px 120px;
    border-color: transparent transparent #40BAA5 transparent;
  }
}
.header {
    z-index: 2;
    position: absolute;
    top: -75px;
    display: block;
    box-shadow: 0px 0px 0px #36897F;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 120px 83px 120px;
    border-color: transparent transparent #36897F transparent;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: all 1s;
    &:before {
      display: block;
      content: '';
      position: absolute;
      top: 9px;
      left: -120px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 120px 75px 120px;
      border-color: transparent transparent #40BAA5 transparent;
    }
  }
.letter {
    z-index: 0;
    position: absolute;
    width: 150px;
    height: 0px;
    background: #FFF;
    left: 45px;
    bottom: 0px;
    opacity: 1;
    transition: all 2s;
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 20px;
      left: 25px;
      width: 100px;
      height: 6px;
      background-color: #FED350;
      transition: all 1.5s;
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 35px;
      left: 25px;
      width: 100px;
      height: 6px;
      background-color: #FED350;
      transition: all 1.5s;
    }
  }
&:hover {
    .header {
      z-index: 0;
      top: -160px;
      transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      border-width: 0 120px 75px 120px;
      &:before {
        top: 0px;
        box-shadow: 0px 5px 0px #36897F;
      }
    }
    .letter {
      bottom: 0px;
      height: 100px;
      opacity: 1;
    }
  }
}