I found a tutorial about creating a breath pacer using CSS: The inhale and the exhale in the code are the same (4s). I want to control with the code the inhale, post-inhale hold, exhale, post exhale hold timing. How…
I created a fingerprint scanner animation in CSS, but I encountered an issue where the scanner animation does not stay in place and instead follows the animation of the scanning board. For more details, I have attached the my codesandbox…
I have the following example code which creates toasts that fly out from the top of the screen, stay for a few seconds, and then fly away: function createToast() { const elem = document.createElement("div"); elem.classList.add("toast"); elem.innerText = "hello"; document.body.appendChild(elem); setTimeout(()…
I want to create an animation of a curved line that moves like on an edge of egg shell from left to right. Here is what i've already done. .box { width: 25px; height: 100px; border: solid 3px #000; border-color:…
I have an animated HTML element (box) as follow: <div id="box"></div> The box is initially animated to 200 pixels to the right with a duration of 4 seconds. .anim { animation-name: anim; animation-duration: 4s; animation-timing-function: linear; /* cubic-bezier(0.1, -0.6, 0.2,…
I want my div to return to its original position in reverse right after I stop hovering. But the return starts before I even begin to hover on the div and right after running the code. I need the reverse…
I'm using an email platform (Listrak) that only allows inline CSS in the email-design. I made a simple scrolling marquee using inline css. But now I'm stuck on where to put the @keyframes css? I can't use tags. Everything has…
I have a fully functional spinning loading indicator in pure CSS, works great with a non-white background (the page background is gray in the example below). The circles are apparently white by default so if I set the page background…
I need to animate a div such that it move left to right and change its color when it hits the edge of screen. So far I have come to a point like this <div class="move-me">no steps</div> .move-me { display:…
I would like to achieve the following animation with CSS: From the center the circle scales to 100%, so the entire circle is filled with a color Then again from the center the fill deformed into a stroke around the…