2016-01-27 127 views
1

我終於有了這個動畫匹配我的設計師提出的原型,除了一件事情之外,懸停狀態在動畫播放之前閃爍。看看我的CodePen:http://codepen.io/sinrise/pen/rxvjyx/CSS動畫。懸停狀態在動畫前閃動

<style type="text/css"> 
@keyframes bounceInUp { 
    from, 60%, 75%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.8, 0.6, 0.5, 1.000); 
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.5, 1.000); 
    } 

    from { 
    -webkit-transform: translate3d(0, 390px, 0); 
    transform: translate3d(0, 390px, 0); 
    } 

    60% { 
    -webkit-transform: translate3d(0, -5px, 0); 
    transform: translate3d(0, -5px, 0); 
    } 

    75% { 
    -webkit-transform: translate3d(0, 1px, 0); 
    transform: translate3d(0, 1px, 0); 
    } 

    to { 
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

.small-hero { 
    position: relative; 
    width: 100%; 
    max-height: 385px; 
    min-height: 385px; 
    overflow-y: hidden; 
    margin-bottom: 15px; 
} 
.small-hero::before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.6)); 
    content: ""; 
} 
.small-hero h3, .small-hero p, .small-hero a { 
    position: absolute; 
    top: 0; 
    margin: 0 auto; 
    color: #fff; 
    z-index: 1; 
    text-align: center; 
} 
.small-hero img { width: 100%; } 
.small-hero .small-hero-hover-bg { 
    position: absolute; 
    top: 390px; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba($tmi-orange, 0.8); 
    z-index: 2; 
} 
.small-hero .small-hero-hover-h3, .small-hero .small-hero-hover-p, .small-hero .small-hero-hover-a { 
    position: absolute; 
    top: 390px; 
    z-index: 2; 
    left: 0; 
    right: 0; 
    max-width: 500px; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); 
} 
.small-hero .small-hero-hover-a { max-width: 200px; } 
.small-hero .small-hero-hover-p { font-size: 18px; } 
.small-hero:hover .small-hero-hover-bg { 
    top: 0; 
    transition: top 0.4s, opacity 0.4s; 
} 
.small-hero:hover .small-hero-hover-h3, .small-hero:hover .small-hero-hover-p, .small-hero:hover .small-hero-hover-a { 
    animation: bounceInUp 0.5s 1; 
} 
.small-hero:hover .small-hero-hover-h3 { 
    top: 100px; 
} 
.small-hero:hover .small-hero-hover-p { 
    top: 150px; 
    animation-delay: 0.05s; 
} 
.small-hero:hover .small-hero-hover-a { 
    top: 250px; 
    animation-delay: 0.1s; 
} 
</style> 
<div class="small-hero"> 
    <img src="http://placehold.it/500x350" /> 
    <div class="small-hero-hover-bg"></div> 
    <h3>Title</h3> 
    <h3 class="small-hero-hover-h3">Title</h3> 
    <p class="small-hero-hover-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elit nec nisl imperdiet efficitur. Ut ut mauris non sapien elementum tempor.</p> 
    <a href="#" class="small-hero-hover-a btn btn-action">Get a Quote</a> 
</div> 

回答

1

http://codepen.io/anon/pen/rxvjQW

上的徘徊.small-hero h3, .small-hero p, .small-hero a

animation: bounceInUp 0.5s 1 forwards;修正了opacity:0;

forwards可以讓你的元素停留在動畫的最後一幀。 opacity:0;使它開始,以及0不透明度。

Here的一些文檔animation-fill-mode

+0

非常感謝!就是這樣。完美的作品! – sinrise

+0

不客氣。 –

+0

也許你可以幫我解決另一個問題。只有相同的動畫我無法獲得任何緩解工作。我試過使用立方貝塞爾,只是緩解,但我沒有做任何改變動畫。有任何想法嗎?再次感謝。 – sinrise