Cool animation for social moving

vertical-fixed-social-style.scss

// Mekongviet - Social animation
.ssba-wrap{
	padding: 0 !important;
	position: fixed;
	top: 50%;
	transform: translate(0,-50%);
	left: 0;
	z-index: 55;
	padding: 0;
	transition: all 0.69s ease-in-out;
    -webkit-transition: all 0.69s ease-in-out;
    @media(max-width: 543px){
		bottom: 0;
		top: auto;
		transform: translate(-50%,0);
		left: 50%;
		width: 100%;
		padding: 4px;
		background: rgba(0,0,0,0.5) !important;
	}
	&:hover{
		background-color: rgba(0,0,0,0.5);
		padding-bottom: 10px !important;
		a{
			opacity: 0.8;
			left: 0;
		}
		#share-btn{
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			left: 0;
		}
		&>div{
			left: 0;
		}
	}
	&>div{
		margin-top: 10px;
		left: -199px;
		position: relative;
		-webkit-animation: fadeEffect 0.69s;
    	animation: fadeEffect 0.69s;
    	transition: all 0.69s ease-in-out;
    	-webkit-transition: all 0.69s ease-in-out;
		@media(max-width: 543px){
			text-align: center !important;
		}
	}
	
	#share-btn{
		background-color: #e31865;
		letter-spacing: 2px;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		padding: 7px;
	    line-height: 100%;
	    color: #FFF;
	    position: relative;
	    font-family: $primary_heading;
	    font-weight: 400;
	    font-size: 12px;
	    display: block;
	    width: auto;
	    cursor: pointer;
	    top: 0;
	    left: -31px;
	    text-align: center;
	    transition: all 0.3s ease-in-out;
    	-webkit-transition: all 0.3s ease-in-out;
    	margin-top: 0;
	}
	a{
		&:hover{opacity: 1;}
		position: relative;
		opacity: 0.8;
    	transition: all 0.3s ease-in-out;
    	-webkit-transition: all 0.3s ease-in-out;
    	cursor: pointer;
    	display: block;
		text-align: center;
		margin: 0 !important;
		@media(max-width: 543px){
			display: inline-block;
		}
	}
	
}