I have the following element: <div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]"> <img class="rounded-s-full border-[12px] border-indigo-400" alt="Placeholder" src="https://placehold.co/400x600" /> </div> And I'm looking to create an animation sequence with Tailwind. For the sequence, first rounded-s-full should take…
I'm trying to create the below SVG animation with a mask. I have tried with CSS stroke properties, but I cannot get it the way I want. Here is the W-shaped SVG I have created. path { stroke: black; fill:…
I have a simple div with a before and after pseudo element. I use keyframes to transform everything along the y axis. The pseudo elements move faster than the main element and I have no idea why. I explicitly set…
i want use the same code for multiple modules in this page and i already tried some different method but nothing seem to be working. i don't want to duplicate the existing codes infinitely, document.addEventListener('DOMContentLoaded', function () { const arrowDown…
I'm using a simple css animation and by clicking on a button I toggle class and playing animation reverse. Unfortunately the animation play correctly on loading page but when i click on the button the animation don't run it give…
I'm working on a portfolio website and I have a menu bar at the top with 3 buttons. My issue is that, when I change the theme of the page from dark to light with a toggle, effects on hover…
I am trying to make hover scale work smoothly with animation scale. Hover works with #test but with .rotate I can't get it to work correctly. Also, why the hover scale doesn't work when the animation-fill-mode is forwards instead of…
I'm currently messing with an information column on the left side of the screen. What I would like is for the column to smoothly slide off the left edge of the screen, and for the remaining content to smoothly fill…
I'm trying to reproduce this heart-shaped "like" button: Inactive state at the top, hovering at the bottom The hover has to be animated with a transition, like this. I've tried using FontAwesome and Material Icons, but I can't figure out…
I'm a little stumped trying to sort out a simple animation of a background-image fading in and out on hover. Seemingly the web browser says undefined though my keyframes are defined: .elementor-section.elementor-element.core-range > .elementor-container:hover .product-image::before { animation: coreRangeBackground 0.3s ease-in-out…