CSS by T. Afif

If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work! Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month. css-tip.com/advertise/

💡 CSS Tip! Create an interactive image slider with speed control using a few lines of code and no image duplication. css-tip.com/interactive-sl… A CSS-only implementation powered by modern features (shape(), sibling-index()/count(), animation-composition, etc.)

@ZahidHa45112113 It's responsive. You can remove the max-width from the container and increase its size and the gap between images will increase. There is the --n variable that control how many images are visible at the same time. It can be any value between 1 and N-1 (N: total number of images)

@ChallengesCss @ChallengesCss What if I don’t have enough items to fill the container, but I still need an infinite loop with equal gaps between all items? How would this work?

How to control infinite CSS animations. In part 1 of 2, @ChallengesCss shows how to speed up, slow down, and reverse infinite CSS animations on demand using animation-composition, CSS variables, and abs() and sign() functions. #css #animation frontendmasters.com/blog/how-to-co…

📝 New CSS article! I am exploring a few CSS tricks for controlling infinite animations. The first article is live. frontendmasters.com/blog/how-to-co… You will be surprised, but it's all about features that are quite old and widely supported for a while (like animation-composition)

How to Control Infinite CSS Animations (Part 1 of 2) Something like manipulating the speed of an animation isn't a big deal, but it's harder when the animation is *already running*. We got tricks. frontendmasters.com/blog/how-to-co…

Here is an overview of the CSS code. Fewer than 10 lines of code, and it works with any animation. You will find another code with better browser support to replace the usage of if() 👇

Another demo with an infinite marquee animation codepen.io/t_afif/full/Qw… via @CodePen Hover to accelerate, slow down, or change the direction.

@NejatCanUnlu I actually have from 0 to V1 (and vice versa) that I will share soon but I will also think about V1 to V2

@ChallengesCss Yes!

💡 CSS Tip! Do you want to control the speed of an infinite animation on hover (or any other interactions)? It's possible with a simple code. css-tip.com/speed-control/ Accelerate, slow down, stop, move in the opposite direction. One CSS variable to set and it's done!

@NejatCanUnlu You mean smoothly go from V1 to V2?

@ChallengesCss Great share as always! Do you have a magic method to ramp animation speed up and down smoothly with pure CSS?

Now it's lazy and bouncy! 😆 Demo: codepen.io/t_afif/full/my… via @CodePen Too much bouncing? Well, drag it slowly! 🫠

A tooltip that follows the anchor when you drag it ... I said: follow the anchor! Come on, lazy tooltip! ... Yes, in that direction, move move ... More energy, please! You are a tooltip, that's your job. 😡 css-tip.com/lazy-tooltip/

💡 CSS Tip! You have the code of a CSS shape and you want its cutout version? Learn how to do it with a simple code. css-tip.com/invert-shape/