CSS 텍스트 캡션을 페이드 인하거나 페이드 아웃하려면 어떻게합니까?

나는 사용자가 이미지의 특정 부분을 롤오프하고 텍스트 캡션이 튀어 나오는 HTML 및 CSS로 이미지 맵을 만들려고 노력해 왔습니다. 나는 거의 거기에 있다고 생각하지만, 텍스트 캡션이 사라지고 사라지는 대신 페이드 인하 고 페이드 아웃하길 원합니다. 아무도 올바른 방향으로 나를 가리켜 주시겠습니까?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>

출처

2016-11-21 noon303

CSS 애니메이션이 여기에 당신의 친구가 여기에 지금까지 가지고있는 코드입니다. http://stackoverflow.com/questions/8449933/animation-css3-display-opacity – DBS

불투명도 및 전환 사용 – pol

http://stackoverflow.com/questions/3331353/transitions-on-the-display-property –

당신이

#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; 
}

바이올린으로 현재 CSS를 변경할 수 있습니다 : http://codepen.io/hunzaboy/pen/mOWOqa

출처

2016-11-21 11:30:06 Aslam

고맙습니다. 많이 :) – noon303

CSS 텍스트 캡션을 페이드 인하거나 페이드 아웃하려면 어떻게합니까?

답변

관련 문제