Skip to content

Instantly share code, notes, and snippets.

@EzeRangel
Last active December 24, 2015 12:38
Show Gist options
  • Save EzeRangel/6798736 to your computer and use it in GitHub Desktop.
Save EzeRangel/6798736 to your computer and use it in GitHub Desktop.
Instead of adding a class via javascript for implementing some kind of animation, we can 'simulate' this extending a 'Silent class' with Sass.
.popup-container:hover > .popup{
@extend %fadeIn;
}
.popup{
visibility: hidden;
/*Some other styles*/
}
/*Silent Class*/
%fadeIn{
visibility: visible;
animation-name: fadeIn;
animation-duration: .2s;
animation-timing-function: ease-in-out ;
}
/*Some Keyframe animation*/
@keyframes fadeIn{
0%{
opacity: 0.0;
transform: scale(0);
}
60%{
transform: scale(1.1);
}
80%{
transform: scale(0.9);
opacity: 1;
}
100%{
transform: scale(1);
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment