Мигающая анимация ⇐ CSS

[Anonymous]

Я пытаюсь сделать анимацию моргания для глаз персонажа, но переход идет не так, я хочу сделать его сверху вниз. Вот мой код:

Код: Выделить всё

Character Assembly

Код: Выделить всё

.character {
position: relative;
}

.guide {
position: absolute;
}
.part {
position: absolute;
}

.eyes {
position: absolute;
z-index: 3;
left: 19px;
}

.eyesoutline {
position:absolute;
z-index: 2;
width:100%;
height:100%;
}

.whole_head {
position: absolute;
animation: float 2s ease-in-out infinite;
}
.head {
position: absolute;
margin-top:19px;
z-index: 2;
}
.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}

.headoutline {
z-index: 2;
position: relative;
width: 100%;
height: 100%;
}

@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

/* Wipe-in and wipe-out animation for the eyelid (VERTICAL wipe) */
@keyframes wipe-in-out-eyelid {
0% {
clip-path: inset(100% 0 0 0); /* Fully hidden from the top */
}
5% {
clip-path: inset(0 0 0 0); /* Fully visible (wipe-in complete) */
}
10% {
clip-path: inset(100% 0 0 0); /* Fully hidden again (wipe-out complete) */
}
100% {
clip-path: inset(100% 0 0 0); /* Stay hidden for the rest of the duration */
}
}

.eyelid {
fill: #ffcc66; /* Eyelid color */
animation: wipe-in-out-eyelid 5s ease-out infinite;  /* 10-second cycle for wipe-in and wipe-out */
transform-origin: center;
}

Как вы можете видеть здесь, выдвигающееся веко (также известное как мигающая часть) должно показывать направление, в котором должны вытираться веки.


Подробнее здесь: https://stackoverflow.com/questions/790 ... -animation