6,313 questions
0
votes
1
answer
117
views
Animate a div between width constrained and a height constrained, also keeping the same aspect ratio as the img
I have a div containing an image. The image is user supplied so it can be tall or wide or square. By default I want to keep the image at a fixed 36px height, its width expanding as needed according to ...
- 1,346
1
vote
1
answer
92
views
Credit Card flip animation is glitching
https://kraker52.github.io/Flipping-Card/
Here is the link to the mini project I made (I don't think it would even be considered mini to you guys). The problem is when you try to hover on it from ...
- 35
0
votes
1
answer
40
views
transition on bootstrap column width is sluggish
i want to apply transition on bootstrap columns width when open state changes, the transition works but it's sluggish, it's not smooth at all
layout.js
"use client";
import { useState } from ...
- 139
1
vote
1
answer
69
views
Disable transition effects for a hover event
Is it possible to disable transition effects for a :hover event?
See the snippet: clicking the button shows some divs one after the other with a fading background (by using a transformation). However, ...
- 117
0
votes
1
answer
45
views
Bottom border animation is not activating
<section className="accessories bg-blue-600 p-8">
<div className="container max-w-7xl my-0 mx-auto">
<div className="accesories-wrapper">
&...
1
vote
0
answers
100
views
My `base-select` expand animation doesn't work until `width` is added
I'm experimenting with the new appearance: base-select (you'll need to view this question in Chrome). Here's the partially broken demo:
select,
::picker(select) {
appearance: base-select;
}
::picker(...
- 880
0
votes
1
answer
148
views
Transition in mask-image
I have a container where a fade is being applied on the right hand side but I want the fade to transition in. So on load the content is shown and then the mask-image transitions in smoothly. Any idea?
...
0
votes
1
answer
51
views
Why is the text within my divs behaving differently with the same styling? [duplicate]
I am wanting my site to be split into two vertical sections, and when one is hovered, it transitions to cover most of the page. The white side behaves exactly how I want it to: the text and background ...
0
votes
1
answer
72
views
CSS transitions work only intermittently in Firefox
I have a simple static HTML page with JavaScript and CSS embedded:
const outerBox = document.getElementById("outerBox");
const innerBox = document.getElementById("innerBox");
const moveOutBtn = ...
- 1,037
1
vote
1
answer
35
views
Dropdown's height isn't changed smoothly, instead, it jumps from one state to another
I'm going through a navbar tutorial on youtube (https://www.youtube.com/watch?v=IF6k0uZuypA&t=987s) - the link is with the timecode. It should work like at this moment in the vid
calcHeight should ...
- 173
1
vote
4
answers
250
views
Change CSS property after transition
I have a button to toggle opening and closing of a dropdown menu with CSS transition. Suppose I have this HTML for a dropdown menu and a toggle button:
<button type="button" id="main-...
- 1,342
2
votes
4
answers
89
views
Need help in toggeling animation with CSS Web Animations API
I am trying to toggle an animation on an element using the CSS Web Animations API (WAAPI). Specifically, I want the animation to transition smoothly between two states on each button click — ...
0
votes
1
answer
96
views
How can I animate an element that shows up after a function is called?
I've been trying to make my navbar responsive for mobile and decided it'd be good to make it a lateral bar when the width gets smaller. Also, in order to not having to change the code in every single ...
- 3
2
votes
1
answer
74
views
Border and background inconsistent transition when transitioning to transparent
I want to have a consistent transition for both background color and border-color. However, it seems like there is some delay on the border-color. This issue is only present when transitioning to ...
- 1,159
0
votes
2
answers
58
views
Define both element dimensions based on one parent dimension
:root {
--success: #0c0;
}
button {
border: 2px solid;
border-radius: 10px;
cursor: pointer;
margin: 1em 0.5em;
padding: 10px 15px;
transition: transform 1s;
}
button:...
- 81
0
votes
2
answers
274
views
Transition a CSS background-color to a gradient
I have some tiles that have an ordinary background-color and show a CSS gradient on hover, and I want to add a transition between these. I've seen this solution, but as far as I can tell the only way ...
- 6,577
1
vote
1
answer
76
views
Animate transform-origin while maintaining previous rotation position
I am trying to animate a "left" to "right"-side rotation using transform-origin. More specifically, I would like to maintain the left side's rotation position when the transform-...
- 822
1
vote
1
answer
149
views
Why transition animation not working when wrapping Drawer component in a custom React Hook?
Update:
This issue has been resolved, and the demo now reflects the corrected version. Thank you to everyone who contributed!
Live Demo: CodeSandbox Demo
Problem Description
I have a Drawer component (...
- 33
2
votes
1
answer
174
views
How would I go about smoothly animating (in CSS only) the elements in a drop down list with a slide-down approach?
(I'm still pretty new to HTML and CSS so bare with me) I've been trying to customize this website to make it more pleasing to the eye. One of the things I'd like to do is customize the drop down menus ...
- 23
0
votes
1
answer
52
views
Issue with transition of filters (CSS)
The transition & filter works fine (the starting colour is white and the ending colour is blueish purple), however, the transition of filter makes it so that it goes through unwanted colours like ...
- 3
3
votes
1
answer
71
views
Difficulties with fade-out/in javascript animation for website content
On my site, I have a container that holds multiple 'pages' of information. When a button is clicked, the current content page disappears and the next one appears on screen, allowing viewers to cycle ...
- 131
1
vote
0
answers
68
views
Transition between animation end keyframe and hover
I'm a new learner and I don't have enough knowledge about animations. I have tried to implement a simple animation using keyframes and hover effect. The problem is if I hover the element when the ...
- 23
0
votes
1
answer
58
views
the transition-color aren't working correctly
I have a button that changes the theme color on navBar and it's working. When I click the button, the background color changes faster then the text colors. The "Home", "Cadastros", ...
- 33
0
votes
0
answers
83
views
Nuxt 3, Nuxt Page, how should I apply transition if only one page (no navigation), when landing on site
Just finishing off my landing page, which will be online whilst I build my new portfolio. Thing, is I am thus not using router. I consulted the Nuxt AI, and it told me that the following would work in ...
0
votes
1
answer
106
views
Why does my ease transition speed up, when revealing and hiding a div?
I am creating an accordion type of question and answers page for a recent project. The answer to the question is revealed by clicking on the question. My approach is to have the answer hidden with max-...
0
votes
1
answer
86
views
CSS Hover Transition Keeping contents in same position
I'm adding some hover animations to a map I'm creating as part of a website (all through CSS), and while it works as intended I'm trying to tinker with the 'top' values so the text itself doesn't move ...
- 33
1
vote
1
answer
71
views
How to avoid mismatched background colors during CSS transitions with transparency? [closed]
Scenario
I recently made an interesting observation in my CSS that took me a little while to understand exactly what was happening.
For example, consider the following code snippet, in which the ...
- 485
3
votes
1
answer
105
views
Why is the `.getAnimations()` rejecting all promises when a HTML dialog element is closed?
I want to trigger a function after a dialog element is closed. I use transitions to fade out the dialog and it's backdrop, so I want to wait till all transitions are done.
I searched how to do this ...
- 157
-1
votes
1
answer
91
views
Issue with CSS for overflow for dropdown
I have created this dummy top nav bar, where i have multiple drop-down which can be scrollable on x axis via buttons if multiple . But when i open the dropdown it is being opened in scroll view for y ...
- 90
0
votes
0
answers
35
views
Avoid the blank screen coming up for a fraction of second
I’m working on a nested menu component, and while the functionality is working as expected, I’m facing an issue with the transitions. When I click on a menu item to view its sub-items, there’s a blank ...
- 586
-1
votes
1
answer
81
views
Why is my css animation not working on closing the element using React useState hook
I have build a sliding submenu with React, Typescript and Tailwind.
The related submenu is showing using React useState hook.
See the working code sandbox here.
Why is my close css animation not ...
- 4,888
1
vote
3
answers
119
views
transition on grid-template-columns fr to px value
I have this HTML / CSS snippet:
.test123 {
grid-template-columns: 255px 255px;
transition: 200ms;
display: grid;
gap: 30px;
.card {
border-radius: 50px;
border: 1px solid #BBD0FB;...
- 352
0
votes
0
answers
48
views
Why doesn't transition work on <aside> to smoothly adjust width when hovered? [duplicate]
I'm trying to create a layout where an aside element smoothly increases its width when hovered.
The grid is set up using grid-template-columns: max-content 1fr, and I expect the aside element to ...
2
votes
2
answers
115
views
SVG Diagram Animation HTML
I wanted to animate a svg graphic. I wanted to animate the bar diagram so the bars start at 0 and reach their height at 4seconds, I can't seem to figure it out. Imagine it like a loading bar but ...
- 43
1
vote
1
answer
104
views
css transition property does not work when setting state using mousenter event
I want to show an animated text next to the button upon hovering the button. This works fine when I am using click event on button but doesn't work when using mouseenter and mouseleave events.
I'm ...
- 86
0
votes
1
answer
34
views
HOC image hover component not targeting pseudo element with Tailwind CSS
I am using Astro and Tailwind CSS.
Why is the following not working?
I have this HOC HoverScale.astro component:
// HoverScale.astro
<span class="[&>img]:group-hover:scale-105 group [&...
- 4,888
0
votes
0
answers
63
views
Dropdown menu works on Chrome device mode but not on iOS
I've used the code from this link:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0
I've changed the TS part into this (I'm working with Angular):
toggleMenu() {
if (this.menu.classList....
- 153
3
votes
1
answer
104
views
Why does inner HTML content appear instantly after css max-height transition completes?
Using HTML and JavaScript I am trying to create a list that transitions into view when a button is clicked, including a scrollable inner container, using a max-height transition on the parent DIV.
...
- 33
1
vote
0
answers
56
views
I'm unable to use transition: to work in a CSS component
I can't get CSS to work in one particular part of my project. Works fine with other components.
index.tsx
const toggleMenu = () => {
setMenuOpen(!menuOpen);
}
return (
....
...
- 11
0
votes
0
answers
119
views
"Expanding Window Effect" scroll trigger, expanding div acting as transition into website Gsap? Js? React?
I am trying to make a scroll trigger transition similar to example below. A div acts like a portal/window where the user is able to look through into it and see the content behind it. As the user ...
- 1
0
votes
0
answers
13
views
The max-height of accordion element causes delay when folding with a cubic bezier animation [duplicate]
I created an accordion in React, but when I expand an item of it it takes a while before it collapses.
Now, I found out why that takes a while. It's because the height of the hidden part (in this case,...
user27791509
1
vote
1
answer
72
views
"transition: margin-top <time>" doesn't work at all
YouTube streams have a specific feature in the view count will change once in a while and with that, the numbers will scroll up or down. From simple inspecting element, I can see that each digit is a ...
- 128
0
votes
1
answer
531
views
svelte transition:slide is jumpy when component switch with different height happen
i have a two forms, one for sendOTP and the other one for verifyOTP and the verify otp one is taller than the send otp. the height transition for my container is jumpy on getting back from second form ...
- 51
1
vote
0
answers
251
views
Is it possible to automatically animate height: auto with css interpolate-size property?
I have this code and I would like to animate height when I add more text. Is it possible?
document.getElementById("append").addEventListener('click', () => {
document.getElementById("text")....
- 2,674
1
vote
2
answers
96
views
How to prevent text moving when transitioning sibling element's width
I'm developing a website that will have a "learn more" button that's split in two, one part says "learn more" and the other says "+". When the mouse hovers over it the &...
2
votes
1
answer
276
views
vuetify2 to vuetify3 transition-group no longer working
So I'm currently working on my transition from Vue2 Vuetify2 to Vue3 Vuetify3 and it's been quite the challenge honestly. It seems my code needs to rely less and less on Vuetify since things like the ...
- 73
1
vote
0
answers
83
views
transform transition image 'jumping' at start and end of animation
So I have a div that I want to expand (along with all elements it contains) when hovered over.. it's mostly working except at the start and end of the animation the background image 'jumps' to an odd ...
- 13
1
vote
1
answer
167
views
Slow Bouncy Effect on Hover using CSS and JS
I have this reference website called pipe.com and I'm so impressed with the bounce effect of the first section after the banner (see attached photo and please try to hover on the card on their website)...
0
votes
3
answers
293
views
CSS circle progress bar is not animating
I am unable to get the circle bar to animate. I attempted adding transition: all 600ms ease; but that didn't work. I am not sure if CSS animation supports conic-gradient.
jQuery(function ($) {
$(...
2
votes
1
answer
72
views
How to prevent CSS transition from playing on-load in Safari?
I'm trying to implement a simple CSS translate transition that slides the content in and out. It works perfectly in Chromium-based browsers, but the transition plays on-load in newer versions of ...
- 6,004