ホバーを遅らせる方法は？ここ

Question

.proposal p{ 
 
     font-size: 14px; 
 
     color: #494949; 
 
     margin-bottom: 15px; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
     display: -webkit-box; 
 
     line-height: 20px; 
 
     max-height: 100px; 
 
     -webkit-line-clamp: 3; 
 
     -webkit-box-orient: vertical; 
 
    
 
    } 
 
    
 
    .proposal p:hover{ 
 
     overflow: visible; 
 
     display: inline-block; 
 
    }

 <div class="proposal"> 
 
        <strong>Proposal</strong> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat voluptatibus ullam illum et aperiam nostrum inventore ad maxime mollitia ducimus sequi, veniam at in qui, quo asperiores odio, ut pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, laborum, commodi. Accusantium repellat facilis omnis consequatur, rerum porro mollitia</p> 
 
        </div> 
 

 

 
    

は、テキストブロックのためのHTMLとCSSだ、私はそれを行うことができる方法をいくつかのCSS3アニメーションを通じてホバー効果を遅くしたいですか。？

Answer 1

あなたはCSSを使用することができますが、このように、時間の経過にテキストフェードを作るに移行：

.proposal p { 
    display: none; 
    opacity: 0; 
    transition: opacity 1.5s; 
} 

.proposal p:hover{ 
    opacity: 1; 
    display: inline-block; 
}