Menu
I am trying to create an "eye blink" animation with HTML and CSS.
What I would want, is that when the eyes blink, the eyeballs are not showing.
As you can see from the code, the eyes consists of 4 elements.
Div "eyes" is the container where the eyes are.
Div "eye1" and "eye2".
Div "eyemask", that has the blinking effect.
Div "eyeball1" and "eyeball2". These should only show on top of the "eyemask", not on top of the "eye1" and "eye2".
Could someone help me to achieve this?
body {
margin: 0px;
}
#container {
position: absolute;
z-index: 100;
width: 300px;
height: 300px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
#eyes {
position: absolute;
z-index: 12;
width: 120px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
#eye1,
#eye2 {
z-index: 12;
}
#eye1,
#eye2,
#eyemask {
position: absolute;
width: 50px;
height: 50px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
clip-path: circle(50% at 50% 50%);
}
#eye2 {
transform: translateX(60px);
}
#eyemask {
background: #fff;
animation-name: blink;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes blink {
0% {
transform: scaleY(1);
}
20% {
transform: scaleY(1);
}
30% {
transform: scaleY(0);
}
40% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
#eyeball1,
#eyeball2 {
position: absolute;
z-index: 11;
width: 10px;
height: 10px;
background: #000;
clip-path: circle(50% at 50% 50%);
}<head>
<link rel="stylesheet" type="text/css" href="Eyes.css">
</head>
<body>
<div id="container">
<div id="eyes">
<div id="eye1">
<div id="eyemask"></div>
<div id="eyeball1"></div>
</div>
<div id="eye2">
<div id="eyemask"></div>
<div id="eyeball2"></div>
</div>
</div>
</div>
</body>Could someone here help me to achieve this?
262
You can simplify your code like below and rely on a clip-path animation:
.eyes {
padding:20px;
background: lightblue;
display: inline-flex;
}
.eyes span{
width: 80px;
height: 80px;
background:grey;
border-radius:50%;
margin:10px;
position:relative;
}
.eyes span:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(black 7px, white 8px);
animation:blink 0.8s linear infinite alternate;
}
@keyframes blink {
from {
clip-path: ellipse(50% 50% at 50% 50%);
}
to {
clip-path: ellipse(50% 0% at 50% 50%);
}
}<div class="eyes">
<span></span>
<span></span>
</div>Make the #eyeball inside the #eyemask and that should do it
body {
margin: 0px;
}
#container {
position: absolute;
z-index: 100;
width: 300px;
height: 300px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
#eyes {
position: absolute;
z-index: 12;
width: 120px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
#eye1,
#eye2 {
z-index: 12;
}
#eye1,
#eye2,
#eyemask {
position: absolute;
width: 50px;
height: 50px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
clip-path: circle(50% at 50% 50%);
}
#eye2 {
transform: translateX(60px);
}
#eyemask {
background: #fff;
animation-name: blink;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes blink {
0% {
transform: scaleY(1);
}
20% {
transform: scaleY(1);
}
30% {
transform: scaleY(0);
}
40% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
#eyeball1,
#eyeball2 {
position: absolute;
z-index: 11;
width: 10px;
height: 10px;
background: #000;
clip-path: circle(50% at 50% 50%);
}<head>
<link rel="stylesheet" type="text/css" href="Eyes.css">
</head>
<body>
<div id="container">
<div id="eyes">
<div id="eye1">
<div id="eyemask">
<div id="eyeball1"></div>
</div>
</div>
<div id="eye2">
<div id="eyemask">
<div id="eyeball2"></div>
</div>
</div>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
