I'm trying to make a blinking animation for the eyes of the character, but the transition is going the wrong way, I want to make it go from top to bottom. Here's my code:
.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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character Assembly</title>
<link rel="stylesheet" href="player.css" />
</head>
<body>
<div class="guide">
<object
data="/svgs/char/shapes/30.svg"
type="image/svg+xml"
class="part body"
></object>
</div>
<div class="character">
<div class="guide">
<object
data="/svgs/char/shapes/30.svg"
type="image/svg+xml"
class="part body"
></object>
</div>
<div class="whole_head">
<div class="eyes">
<svg id="eyes_svg">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path
d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75"
fill="#ffffff"
fill-rule="evenodd"
stroke="none"
/>
</g>
<!-- Pupils -->
<g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
<path
d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75"
fill="#000000"
fill-rule="evenodd"
stroke="none"
/>
<path
d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95"
fill="#000000"
fill-rule="evenodd"
stroke="none"
/>
</g>
<!-- Eyelids (blinking animation) -->
<g
class="eyelid"
id="eyelids"
transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)"
>
<path
d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75"
/>
</g>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path
d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
<path
d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
</g>
</svg>
</div>
<!-- Outline SVG -->
<div class="head">
<svg id="head_svg">
<svg
id="head_shape"
xmlns="http://www.w3.org/2000/svg"
width="150"
height="90"
>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path
id="head_color"
d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0"
fill="#ffcc66"
fill-rule="evenodd"
stroke="none"
/>
</g>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path
d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
</g>
</svg>
</svg>
</div>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
</div>
<script src="player.js"></script>
</body>
</html>As you can see here, the wipe-in-out-eyelid (aka the blinking part) is supposed to show the direction the eyelids are supposed to wipe in.
inset() take top, right, bottom, left so you need to rearrange the values in
@keyframes wipe-in-out-eyelid
.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(0 0 100% 0);
/* Fully hidden from the bottom */
}
5% {
clip-path: inset(0 0 0 0);
/* Fully visible (wipe-in complete) */
}
10% {
clip-path: inset(0 0 100% 0);
/* Fully hidden again (wipe-out complete) */
}
100% {
clip-path: inset(0 0 100% 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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character Assembly</title>
<link rel="stylesheet" href="player.css" />
</head>
<body>
<div class="guide">
<object
data="/svgs/char/shapes/30.svg"
type="image/svg+xml"
class="part body"
></object>
</div>
<div class="character">
<div class="guide">
<object
data="/svgs/char/shapes/30.svg"
type="image/svg+xml"
class="part body"
></object>
</div>
<div class="whole_head">
<div class="eyes">
<svg id="eyes_svg">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path
d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75"
fill="#ffffff"
fill-rule="evenodd"
stroke="none"
/>
</g>
<!-- Pupils -->
<g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
<path
d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75"
fill="#000000"
fill-rule="evenodd"
stroke="none"
/>
<path
d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95"
fill="#000000"
fill-rule="evenodd"
stroke="none"
/>
</g>
<!-- Eyelids (blinking animation) -->
<g
class="eyelid"
id="eyelids"
transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)"
>
<path
d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75"
/>
</g>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path
d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
<path
d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
</g>
</svg>
</div>
<!-- Outline SVG -->
<div class="head">
<svg id="head_svg">
<svg
id="head_shape"
xmlns="http://www.w3.org/2000/svg"
width="150"
height="90"
>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path
id="head_color"
d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0"
fill="#ffcc66"
fill-rule="evenodd"
stroke="none"
/>
</g>
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path
d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9"
fill="#000000"
fill-opacity="0.49803922"
fill-rule="evenodd"
stroke="none"
/>
</g>
</svg>
</svg>
</div>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
</div>
<script src="player.js"></script>
</body>
</html>