Alternating text in pure css – Html
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;…
Can I animate the background to rotate instead of the element? – Html
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.…
Is it possible to use `@apply` in tailwindcss for keyframes?
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'm having trouble with a height and color animation (CSS only) staying at the last keyframe
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…
Swipe hand icon animation with CSS – Html
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:…
How to get the color at the top in a roulette built with canvas? – Html
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 trying to create a bordered button animation in a way that but the button seems pressed if hovered but its getting shifted in unexpected manner – Html
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…
Split Animation Like 🎊 Emoji CSS
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…
How to remove glitch from jQuery infinite background loop?
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…
Elementor – How to make a sliding-text effect (text entering gradually)?
I want to make a title that enters letter-by-letter, similar to the animation of Sliding Text from the Elements Wordpress Theme and as animated on this web-page. Issues But I don't know how to make the effect work when the…