How do I create a blinking effect with HTML and CSS? - html

Question

I'm currently trying to create a blinking eye effect with HTML and CSS. My problem is that the under part (eyelid) is moving the wrong way. It should be animated counterwise in order to look like the desired effect.
I already tired a lot of things to make it work and don't have any idea what else to do.
Here's my CSS. Is this a problem where some JS is needed as well?
.upper-eye {
background: linear-gradient(to bottom,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 0;
position: fixed;
top:0;
left:0;
animation: bounce 2s linear infinite;
}
.under-eye {
background: linear-gradient(to top,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 100;
position: fixed;
bottom: -10px;
left: 0;
animation: bounce 2s linear infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}

Answer 1

The problem is that you're using the same #keyframes and expecting a different action. You might need to make a second #keyframes setting to do what you want but the other way around, then you could set that #keyframes to the bottom eyelid.
So it could look something like this:
#-webkit-keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-15px);}
60% {-webkit-transform: translateY(-30px);}
}
keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-30px);}
}
bounceReverse {
webkit-animation-name: bounceReverse;
animation-name: bounceReverse;
}
You could also try using animation-direction: reverse; on the existing #keyframes animation to reverse the effect of the keyframe you're seeing correctly on the top eyelid.