Last active
May 24, 2021 20:37
-
-
Save awhite92/e3e1209061c04d6f04473a5eec6d2baa to your computer and use it in GitHub Desktop.
animating visibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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