懸停的CSS伸縮邊框動畫

Question

我對CSS動畫相當陌生，並且遇到了以我想要的方式動畫邊框的問題。最初我想從中心獲得左右邊框望遠鏡，並在結果元素懸停時滿足頂部和底部邊界。

我能弄清楚如何用頂部和底部的邊框做到這一點，但我把它們放在單獨的div中，並給了它們最初的尺寸。

任何幫助或建議將不勝感激。

jsfiddle

#case-results { 
 
    background: #f6f5f0; 
 
    padding: 0 0 40px 0; 
 
    text-align: center; 
 
} 
 

 

 
.case-results-title hr{ 
 
    border: 1px solid #959a90; 
 
    width: 35%; 
 
    float: left; 
 
} 
 

 

 
.case-results-title i{ 
 
    font-size: 30px; 
 
    color: #787c74; 
 
    padding-top: 5px; 
 
} 
 

 
.result-col { 
 
    color: #45474e; 
 
} 
 

 
.result-col:hover { 
 
    color: #45474e; 
 
} 
 

 
.result-top { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    height: 20px; 
 
    border-top: 5px solid #959a90; 
 
    border-left: 5px solid #959a90; 
 
    border-right: 5px solid #959a90; 
 
    padding-bottom: 5px; 
 
    margin-top: 40px; 
 
} 
 

 
.result-col:hover .result-top { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-top: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition: .9s; 
 
} 
 

 
.result-bottom { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    height: 20px; 
 
    border-bottom: 5px solid #959a90; 
 
    border-left: 5px solid #959a90; 
 
    border-right: 5px solid #959a90; 
 
    padding-top: 10px; 
 
} 
 

 
.result-col:hover .result-bottom { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-bottom: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition: .9s; 
 
} 
 

 
.result-txt { 
 
    min-height: 210px; 
 
    
 
} 
 
.result-txt p{ 
 
    margin:0 0; 
 
} 
 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition-delay: .9s; 
 
    /*transition: .5s;*/ 
 
} 
 

 
.result-amount { 
 
    font-size: 45px; 
 
    padding-top: 30px; 
 
} 
 

 
.result-type { 
 
    font-size: 24px; 
 
    padding-top: 20px; 
 
} 
 

 
.result-description { 
 
    padding-bottom: 20px; 
 
    margin: 0; 
 
}

<section id="case-results"> 
 
    \t 
 
    \t <div class="container"> 
 
    \t \t <div class="row"> 
 
       <div class="col-sm-6 result-col col-md-3"> 
 
       <div class="result-top"></div> 
 
       <div class="result-txt"> 
 
        <p class="result-amount">$100</p> 
 
        <p class="result-type">Settlement</p> 
 
        <p class="result-description">blah blah blah</p> 
 
       </div> 
 
       <div class="result-bottom"></div> 
 
       </div> 
 
    \t \t </div><!--/.row--> 
 
    \t </div><!--/.container--> 
 

 
    </section><!--/#case-results-->

Answer 1

我認爲你的回答可能是動畫的最小高度財產。

您必須將最小高度設置爲您的容器的原始狀態（result-txt），然後使其在懸停狀態下變大。

有了這個，你不需要額外的頂部和底部股利。

.case-results-title hr{ 
 
    border: 1px solid #959a90; 
 
    width: 35%; 
 
    float: left; 
 
} 
 

 

 
.case-results-title i{ 
 
    font-size: 30px; 
 
    color: #787c74; 
 
    padding-top: 5px; 
 
} 
 

 
.result-col { 
 
    color: #45474e; 
 
} 
 

 
.result-col:hover { 
 
    color: #45474e; 
 
} 
 

 
.result-txt { 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    border-top: 5px solid #959a90; 
 
    border-left: 0px solid #959a90; 
 
    border-right: 0px solid #959a90; 
 
    border-bottom: 5px solid #959a90; 
 
    padding-bottom: 5px; 
 
    margin-top: 40px; 
 

 
    height: auto; 
 
    min-height:20px; 
 
} 
 

 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-top: 5px solid #78a1bb; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    border-bottom: 5px solid #78a1bb; 
 
    transition: .9s; 
 

 

 
    min-height:200px; 
 
} 
 
.result-txt p{ 
 
    margin:0 0; 
 
} 
 
.result-col:hover .result-txt { 
 
    width: 100%; 
 
    background: #FFF; 
 
    border-left: 5px solid #78a1bb; 
 
    border-right: 5px solid #78a1bb; 
 
    transition-delay: .9s; 
 
    /*transition: .5s;*/ 
 
} 
 
.result-amount { 
 
    font-size: 45px; 
 
    padding-top: 30px; 
 
} 
 
.result-type { 
 
    font-size: 24px; 
 
    padding-top: 20px; 
 
} 
 
.result-description { 
 
    padding-bottom: 20px; 
 
    margin: 0; 
 
} 
 
#case-results { 
 
    background: #f6f5f0; 
 
    padding: 0 0 40px 0; 
 
    text-align: center; 
 
}

<section id="case-results"> 
 
    \t 
 
    \t <div class="container"> 
 
    \t \t <div class="row"> 
 
       <div class="col-sm-6 result-col col-md-3"> 
 
       
 
       <div class="result-txt"> 
 
        <p class="result-amount">$100</p> 
 
        <p class="result-type">Settlement</p> 
 
        <p class="result-description">blah blah blah</p> 
 
       </div> 
 
       
 
       </div> 
 
    \t \t </div><!--/.row--> 
 
    \t </div><!--/.container--> 
 

 
    </section><!--/#case-results-->