I’m trying to make a simple text animation with CSS.
The text should slowly change value of font-style attribute.

I want to rotate a triangle created with CSS from the top-left or top-right sides. For example, in the attached image, there are two cases of triangle rotation. In the first case, the triangle is rotated from the top-left, and in the second case, it’s rotated from the top-right. Is there a way to implement these rotations simply using CSS?

I am animated some elements with keyframe animation. The animation is shifting opacity from 0 to 1:

I’m trying to follow a Kevin Powell tutorial to make an animation of drops revealing a title. However, I’m having a bug and I think I tried everything I could think of.

I’m looking to make a word rotator, whereby an unknown number of words slide in for 1 second, pause for 3 seconds, then slide out for 1 second, one after another, then repeat, using CSS if possible. So the overall loop should be 5 seconds duration.

So, what I’m trying to achieve is a background that will slowly fill a circle button (or any other) element when I click on it.

I am trying to collapse a box using css animation. After the animation, I want to make the box disappear and then show my page. However, after the box collapses it reappear again. I tried setting the display to none but it still doesn’t work.

I’m encountering an issue with implementing a hover effect on underlined links using SCSS. I’m aiming to create a transition where, on hover, the text color changes to red, and the underline disappears momentarily before being redrawn in red from left to right. When hover finishes first the red underline should dissapear and only then the original, black underline should appear again (without animation). The first step works, however, I’m having trouble ensuring that the transition from the hovered element finishes before the non-hovered element is displayed. I’ve tried experimenting with transition-delay but to no avail. You can see the issue in the following code – notice how black underline appears BEFORE the red line completely shrinks when hover ends (on mouse leave). Can you help?

#cursor { position: absolute; width: 20px; height: 20px; border: 2px solid #000; box-sizing: border-box; transition: 0.1s; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } #moon { position: absolute; width: 35px; height: 35px; border-radius: 50%; background-color: rgb(186, 186, 186); animation: rotate 3s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg) translateX(80px); } 100% { […]

I am making a webpage and wanted the title to do a ‘swing’ animation when the mouse hovers over it. The code works fine, but when the mouse stops hovering, it snaps back to its original position, instead of finishing the animation.