CSS Animation: display

1 前言

元素消失的动画

2 解决方案

在做一些动画效果，需要隐藏一些元素的时候，如果直接使用 display: none 浏览器就不理我了。于是需要下面这些折衷的办法。

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s; /*在出现的时候不延迟*/
}

Reference:

Transitions on the display: property
CSS3 transitions using visibility and delay
How Transitions Work