Skip to content

Instantly share code, notes, and snippets.

@awhite92

awhite92/example.css

Last active May 24, 2021 20:37
Show Gist options
  • Save awhite92/e3e1209061c04d6f04473a5eec6d2baa to your computer and use it in GitHub Desktop.
Save awhite92/e3e1209061c04d6f04473a5eec6d2baa to your computer and use it in GitHub Desktop.
Download ZIP
animating visibility
Raw
example.css
.card .icon {
visibility: hidden;
opacity: 0;
transform: translate(0, 20px);
transition: all 0.5s ease-out 0s, visibility 0s 0.5s;
}
.card:hover .icon {
visibility: visible;
opacity: 1;
transform: translate(0,0);
transition: all 0.5s ease-out 0s, visibility 0s 0s;
}
Raw
mixins.scss
@mixin item-show ($delay: 0, $speed: 0.4, $curve: $ease-out ) {
visibility: visible;
opacity: 1;
transform: translate(0,0);
transition: all #{$speed}s $curve #{$delay}s, visibility 0s #{$delay}s;
}
@mixin item-hide ($delay: 0, $speed: 0.4, $curve: $ease-out ) {
visibility: hidden;
opacity: 0;
transition: all #{$speed}s $curve #{$delay}s, visibility 0s #{$delay + $speed}s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment