如何让我的 CSS 文本标题淡入淡出？

Question

我一直在尝试使用 HTML 和 CSS 制作图像映射，其中用户滚动图像的某个部分并弹出文本标题。我想我快到了，但我希望文本标题淡入淡出，而不是仅仅出现和消失。有人能指出我正确的方向吗？这是我到目前为止的代码：

#map {
  margin: 0;
  padding: 0;
  width: 400px;
  height: 250px;
  background: #000;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 10pt;
  font-weight: 700;
  line-height: 18px;
}
#map h1 {
  margin: 0px;
  padding-bottom: 5px;
  color: #fff;
  font-size: 12pt;
  font-weight: 700;
}
#map li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#map li a {
  position: absolute;
  display: block;
  background: url(images/blank.gif);
  text-decoration: none;
  color: #ed4e6e;


}
#map li a span {
  display: none;

}
#map li a:hover span {
  position: relative;
  display: block;
  width: 200px;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;

}
#map a.caption1 {
  top: 80px;  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption2 {
  top: 80px;
  left: 190px;
  width: 10px;
  height: 10px;
  background: #ff0035;

}
#map a.caption3 {
  top: 180px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption4 {
  top: 170px;
  left: 250px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption5 {
  top: 90px;
  left: 365px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}

<ul id="map">
  <li><a class="caption1" href="#" title=""><span>
    <h1>Caption 1</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span></a></li>
  <li><a class="caption2" href="#" title=""><span>
    <h1>Caption 2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption3" href="#" title=""><span>
    <h1>Caption 3</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption4" href="#" title=""><span>
    <h1>Caption 4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption5" href="#" title=""><span>
    <h1>Caption 5</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
</ul>

Answer 1

你可以把你当前的css改成这个

#map li a span {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#map li a:hover span {
  position: relative;
  width: 200px;
  display: block;
  z-index: 10;
  visibility: visible;
  opacity: 1;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;
}

小提琴：http://codepen.io/hunzaboy/pen/mOWOqa