Skip to content

Instantly share code, notes, and snippets.

@memetican
Last active August 26, 2023 20:34
Show Gist options
  • Save memetican/ca27982d01fbe65127da7e22104fab71 to your computer and use it in GitHub Desktop.
Save memetican/ca27982d01fbe65127da7e22104fab71 to your computer and use it in GitHub Desktop.
CSS Highlight Animation
.anim-bg {
position: relative;
}
.anim-bg::before {
content: "";
position: absolute;
left: -0.2rem; /* Start 0.2rem to the left */
width: 0%; /* Initial width */
height: 100%;
background: yellow;
z-index: -1;
animation: swipeEffect 0.6s forwards;
}
@keyframes swipeEffect {
to {
width: calc(100% + 0.4rem); /* Extend to 0.2rem beyond both sides */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment