Skip to content

Instantly share code, notes, and snippets.

@theanhdo94
Created December 29, 2016 03:20
Show Gist options
  • Select an option

  • Save theanhdo94/8d0aa0050a4b1ff766b038f017900998 to your computer and use it in GitHub Desktop.

Select an option

Save theanhdo94/8d0aa0050a4b1ff766b038f017900998 to your computer and use it in GitHub Desktop.
Cool animation for social moving
// 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment