<分区>
我终于有了这个与我的设计师想出的原型(prototype)相匹配的动画，除了一件事，悬停状态会在动画播放之前闪烁。查看我的 CodePen:http://codepen.io/sinrise/pen/rxvjyx/
<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>