CSS Animation. Hover state flashing before animation [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I finally have this animation matching the proto my designer came up with, except one thing, the hover state flashes right before the animation plays. Check out my 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>
Get a Quote
</div>

Answer 1

http://codepen.io/anon/pen/rxvjQW
Fixed with opacity:0; on .small-hero h3, .small-hero p, .small-hero a
and animation: bounceInUp 0.5s 1 forwards; on the hovers.
forwards makes it so that your element will stay at its last frame of the animation. opacity:0;makes it so that it starts, well, with 0 opacity.
Here's some documentation on animation-fill-mode.