pop effect animation

index.html

<!-- Created by Siamak Mokhtari (@sia_mac) -->
<section class="grid-full">
  
  <h1>pop on Licon!</h1>
  <p>pop is an effect animation that <a href="https://github.com/facebook/" target="_blank">Facebook</a> used on <a href="http://www.facebook.com/paper" target="_blank">Paper&trade;</a> application.<br/>
  In this pen you can see pop animation on CSS3 without using any js codes.
  </p>
  
  <figure class="grid-one pop">
    <i class="licon-clock"></i>
    <figcaption>Set alarm (!)</figcaption>
  </figure>
  
  <hr class="little" />
  
  <footer>
    June 26, 2014 – Created by <a href="http://twitter.com/sia_mac" target="_blank" title="Siamak's Twitter">Siamak Mokhtari</a>
    <br />
    <small><i>Clock</i> icon taken from <a href="http://siamakmokhtari.github.io/licon" target="_blank">Licon</a> pack—icon with Pure CSS3.</small>
  </footer>
  
</section>

pop-effect-animation.markdown

pop effect animation

pop is an effect animation that Facebook used on Paper™ application. this a trick that you can use pop effect in css3 without using any js codes.

A Pen by Siamak Mokhtari on CodePen.

License.

script.js

// just css :-)

style.scss

@import "bourbon";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
$bg:#1BA39C;
$color:#fefefe;


html, body {height: 100%;padding: 0;margin:0;}
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
*:focus{outline:none}
p{margin:0;}
html {font-size: 100%;-webkit-font-smoothing: antialiased;}
body{
  font-family: "Open Sans",Arial,Times,serif;
  text-align:center;
  background-color:$bg;
  color:$color;
  border:.5em solid rgba(0,0,0,.2);
}
a{
  color: darken($color,80%);
  text-decoration: none;
  @include transition(all 100ms ease-in);
&:hover{
  color:darken($color,100%);
}
}
p {
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
h1 {
  font-size: 3em;
  line-height: 3.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.grid-full{
  width:50rem;margin:2rem auto;max-width:90%;
  & .grid-one{
    display:block;width:10em;margin:1.5rem auto;height:10rem;vertical-align:middle;background-color: darken($color,80%);border-radius:.5em;line-height:2rem;padding:2em 0;position:relative;cursor:pointer;
  }
}
hr.little{width: 2.5rem;border:1px solid darken($color,80%);padding:.1rem 0;border-width:1px 0;margin:1em auto;display:block;}

/* licon - Lightness and Useful icons with Pure CSS3 */
$basecolor:$bg; 
$size:64px;

[class^="licon-"] {
    display: inline-block; 
    position: relative;
    &:before, &:after{
        content:'';pointer-events: none;
    }
}

/* i.licon-clock */
.licon-clock{
    width: $size;height:$size;border:$size/16 solid $basecolor;border-radius:100%;
    &:before{
        position: absolute;width: $size/16;height:$size/3;background-color:$basecolor;bottom:ceil($size/2.5);left:$size/2 - $size/14;@include transform(rotate(0deg));
    }
    &:after{
        position: absolute;width: $size/16;height:$size/4;background-color:$basecolor;bottom:ceil($size/3.5);left:$size/2 - $size/6;@include transform(rotate(90deg));
    }
}

/* pop with pure css3*/
.pop{
  @include transform(scale(1));
  @include user-select(none);
  @include transition(all 100ms cubic-bezier(.07,.31,.6,1.84));
  &:active{
    @include transform(scale(.9));
    opacity:.75;
  }
}