Skip to content

Instantly share code, notes, and snippets.

@mohamnag
Created December 16, 2014 11:51
Show Gist options
  • Save mohamnag/58b0090216288fa616e8 to your computer and use it in GitHub Desktop.
Save mohamnag/58b0090216288fa616e8 to your computer and use it in GitHub Desktop.
CSS3 show and hide animation
$veryBigWidth: 100rem;
$veryBigHeight: 100rem;
@mixin transition-hide {
transition: opacity 0.5s ease;
visibility: hidden;
opacity: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
}
@mixin transition-show {
transition: opacity 0.5s ease;
visibility: visible;
opacity: 1;
max-height: $veryBigWidth;
max-width: $veryBigHeight;
overflow: visible;
}
@mohamnag
Copy link
Author

change the variables as fits your design, modify the animation to your need.
following properties may be animated:

  • max-height
  • max-width
  • opacity

in some cases (I dont know yet why!) you need to set position: absolute for this to work. It seems it depends on parent's position property though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment