悬停的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-->