Eye Icon Blink Hover
An eye icon that blinks when hovered, then glances left and right before looking back at you. The lid is a scaleY squash on the whole eye; the pupil moves on its own keyframes.
Also known as: eye animation css, show password icon hover, view icon hover.
HTML
<button class="hfx-eye-icon-blink" aria-label="Show password"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g class="hfx-eye-icon-blink-eye"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z"/><circle class="hfx-eye-icon-blink-pupil" cx="12" cy="12" r="3"/></g></svg></button>
CSS
.hfx-eye-icon-blink {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 3.5em;
height: 3.5em;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
border-radius: 0.85em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
transition: background-color 0.25s ease;}
.hfx-eye-icon-blink svg {
width: 1.65em;
height: 1.65em;
}
.hfx-eye-icon-blink-eye,
.hfx-eye-icon-blink-pupil {
transform-box: view-box;
transform-origin: 50% 50%;
}
.hfx-eye-icon-blink:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-eye-icon-blink:is(:hover, :focus-visible) .hfx-eye-icon-blink-eye {
animation: hfx-eye-icon-blink-lid 2.4s ease-in-out infinite;
}
.hfx-eye-icon-blink:is(:hover, :focus-visible) .hfx-eye-icon-blink-pupil {
animation: hfx-eye-icon-blink-look 2.4s ease-in-out infinite;
}
@keyframes hfx-eye-icon-blink-lid {
0%, 12%, 100% { transform: scaleY(1); }
6% { transform: scaleY(0.08); }
}
@keyframes hfx-eye-icon-blink-look {
0%, 18%, 90%, 100% { transform: translateX(0); }
30%, 45% { transform: translateX(-11%); }
60%, 78% { transform: translateX(11%); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-eye-icon-blink, .hfx-eye-icon-blink *, .hfx-eye-icon-blink::before, .hfx-eye-icon-blink::after, .hfx-eye-icon-blink *::before, .hfx-eye-icon-blink *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.