SOURCE

$("#appear").one("click",appearPath);
function appearPath(e){
	e.preventDefault();
	$(this).after($('<input/>').attr({
		"id":'menu',
		"class":"menu-checkbox",
		"type":"checkbox",
		"checked":"checked"
	}));
}

<script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<div id="ckepop" class="share">
            <label id="appear" class="menu" for="menu" href="#"></label>
            <span class="share-btn sina">
                <a class="jiathis_button_tsina"></a>
            </span>
            <span class="share-btn qzone">
                <a class="jiathis_button_qzone"></a>
            </span>
            <span class="share-btn qq">
                <a class="jiathis_button_tqq"></a>
            </span>
            <span class="share-btn rr">
                <a class="jiathis_button_renren"></a>
            </span>
        </div>

*{margin:0;padding:0;}
body{background:#C4E6F5;}
.share{
	position:absolute;
	top:100px;
	left:100px;
	z-index:10;
}
.share .menu{	
position:absolute;
z-index:20;
width:65px;
height:63px;
background:url(http://sandbox.runjs.cn/uploads/rs/233/gpoeqmgk/share-menu.png);
cursor:pointer;
}
.share .share-btn{
position:absolute;
left:15px;
top:15px;
width:47px;
height:44px;
background:url(http://sandbox.runjs.cn/uploads/rs/233/gpoeqmgk/share-menu.png);
}
.share .share-btn a{ display:block;widht:47px;height:44px; }
.share .sina {
    background-position: 1px -80px;
}
.share .qzone {
    background-position: 1px -130px;
}
.share .qq {
    background-position: 1px -180px;
}
.share .rr {
    background-position: 1px -230px;
}
.share .menu-checkbox{
	top:50px;
	display:none;
}
.share .menu-checkbox:not(:checked) ~ .sina {
    -webkit-animation-name: "disappear-'sina'";
    -webkit-animation-duration: 387.5ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
.share .menu-checkbox:checked ~ .sina  {
    -webkit-animation-name: "appear-'sina'";
    -webkit-animation-duration: 340ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 20ms;
}
.share .menu-checkbox:not(:checked) ~ .qzone {
    -webkit-animation-name: "disappear-'qzone'";
    -webkit-animation-duration: 387.5ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
.share .menu-checkbox:checked ~ .qzone  {
    -webkit-animation-name: "appear-'qzone'";
    -webkit-animation-duration: 340ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 20ms;
}
.share .menu-checkbox:not(:checked) ~ .qq {
    -webkit-animation-name: "disappear-'qq'";
    -webkit-animation-duration: 387.5ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
.share .menu-checkbox:checked ~ .qq  {
    -webkit-animation-name: "appear-'qq'";
    -webkit-animation-duration: 340ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 20ms;
}
.share .menu-checkbox:not(:checked) ~ .rr {
    -webkit-animation-name: "disappear-'rr'";
    -webkit-animation-duration: 387.5ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

.share .menu-checkbox:checked ~ .rr  {
    -webkit-animation-name: "appear-'rr'";
    -webkit-animation-duration: 340ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 20ms;
}

@-webkit-keyframes "appear-'sina'" {
    0% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
        -webkit-transform: translate3d(-24px, -109px, 0px) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate3d(-14px, -89px, 0px);
    }
}

@-webkit-keyframes "disappear-'sina'" {
    0% {
        -webkit-transform: translate3d(-14px, -89px, 0px) rotateZ(0deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    70% {
        -webkit-transform: translate3d(-24px, -109px, 0px) rotateZ(360deg);
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
    }
}


@-webkit-keyframes "appear-'qzone'" {
    0% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
        -webkit-transform: translate3d(60px, -96px, 0px) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate3d(40px, -76px, 0px);
    }
}

@-webkit-keyframes "disappear-'qzone'" {
    0% {
        -webkit-transform: translate3d(40px, -76px, 0px) rotateZ(0deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    70% {
        -webkit-transform: translate3d(60px, -96px, 0px) rotateZ(360deg);
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
    }
}


@-webkit-keyframes "appear-'qq'" {
    0% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
        -webkit-transform: translate3d(108px, -43px, 0px) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate3d(78px, -38px, 0px);
    }
}

@-webkit-keyframes "disappear-'qq'" {
    0% {
        -webkit-transform: translate3d(78px, -38px, 0px) rotateZ(0deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    70% {
        -webkit-transform: translate3d(108px, -43px, 0px) rotateZ(360deg);
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
    }
}

@-webkit-keyframes "appear-'rr'" {
    0% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
        -webkit-transform: translate3d(98px, 20px, 0px) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate3d(88px, 15px, 0px);
    }
}

@-webkit-keyframes "disappear-'rr'" {
    0% {
        -webkit-transform: translate3d(88px, 15px, 0px) rotateZ(0deg);
        -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
    }
    70% {
        -webkit-transform: translate3d(98px, 15px, 0px) rotateZ(360deg);
        -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0px) rotateZ(540deg);
    }
}