I have been messing about with some css animations and somehow managed to get things to work as required on :hover My question is how to get them to return to state smoothly after the :hover ends. I've tried variations…
I want to use this animation on my own website. However, I'm unsure how to add a third line and got stuck on how to do so. body { background-color: black; color: white; font-size: 100px; } h1 { font-size: 30px;…
I created a box with a gradient border, and I'd like to animate that gradient so it's doing a 360 rotation. With the code I'm currently working on, instead of the gradient background itself rotating, the actual box is rotating.…
I need to apply the following entering and leaving animation They are presented using tailwindcss classes Entering: "transform ease-out duration-300 transition" From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" To: "translate-y-0 opacity-100 sm:translate-x-0" Leaving: "transition ease-in duration-100" From: "opacity-100" To: "opacity-0" I tried…
I have a battery animation that is working fine and all, but I can't seem to get the animation to stay at the last keyframe. The animation is a battery filling and at the last keyframe I have the height…
html { background: #4F4F4F; } .path { content: ""; width: 20px; height: 20px; position: absolute; background: rgba(149, 147, 241, 0.5); border-radius: 40px; top: 28px; left: 78px; } .hand-icon { position: relative; background-image: url('https://i.postimg.cc/8556gm60/hand.png'); background-repeat: no-repeat; background-position: center; width: 100px; height:…
I built a roulette using canvas, since I'm new at it I'm not being able to get the color I need. The roulette has an arrow at its top, I want to log the color that are below the arrow.…
I am using translateY to give the button a depth effect using CSS keyframes and then using that keyframe into :hover pseudo state with the help of the animate property. But, it's kind of shifting behind the ::after element. Any…
i want to make a animation for a circle that splits open on two sides: kind of like the 🎊 emoji flipped upside down. I have two half circle elments and i put them next to each other. I tryed…
I have a background image set to loop infinitely on a 10 second CSS animation. I'm using jQuery to find the height of the image based on the users screen size. Then I use background-position-y and go from 0 to…