Questions tagged [css-transitions]
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
css-transitions
6,302
questions
0
votes
1
answer
17
views
Tailwind width transition for non specific values
I got a button styled with Tailwind and Vue js 3. This button contains a classic "Login" text. I want to achieve that when the user clicks and a loading status is triggered, the button ...
- 109
0
votes
0
answers
35
views
How to scale an image on hover without messing with other elements, while also respecting max-width, using only CSS?
I'm trying to add zoom on hover to some images. The entire images should be viewable while zoomed in.
First I tried classic scale transformation, but it doesn't work well with smaller devices like ...
- 1,399
0
votes
0
answers
23
views
Overlay and scale image to take up as much of the screen as possible with a smooth transition [closed]
I have a few columns of images of different heights and I'm trying to make it so that when you click on one of them, it transitions into taking the full height of the screen while keeping its aspect ...
- 439
0
votes
1
answer
29
views
Trying to access CSS attribute value in JS, can't use it outside of 'DOMContentLoaded' event
I am trying to access the transition duration property of an element in my scene.
The problem is, when trying to get it without the 'DOMContentLoaded' event listener, it returns 0 or a blank string.
...
- 9
0
votes
0
answers
15
views
react-spring -leave event not working as expected
enter image description hereenter image description here
Please help to make it animation as attached image, I tried with @react-spring/web library - useTransition leave config seems it's not working ...
1
vote
1
answer
47
views
Scroll to target horizontally with jQuery
Trying to revolutionize the world of carousels by creating something super simple and semantic that simply works with anchor links. It works mostly, but it jumps to the href rather than scrolling ...
- 499
0
votes
0
answers
40
views
Angular :enter and :leave transitions not working (v. 18.0.5)
I am trying to create an :enter and :leave fade-in and fade-out transition for an HTML element, but it doesn't seem to work. Or in some cases works unexpectedly... This is the HTML in my template:
<...
- 3
0
votes
1
answer
35
views
Animated flexbox order to make a smooth scrolling infinite scroll
I'm trying to make an infinite scroll carousel. Let's say it has three items & the HTML is:
document.querySelectorAll('.buttons .button').forEach((button) => {
button.addEventListener('...
- 47
1
vote
1
answer
47
views
Match up ease-in-out with ease-out
I have two elements with animation. The first elements animation lasts 1 second and has an easing curve of cubic-bezier(0.5, 0, 0.5, 1) (easing in and out). The second elements animation starts 0.5s ...
- 35
2
votes
1
answer
31
views
Transition on a Pagination in React
I try to style button which is active in that way that I have a small transition on it when it gets that attribute but I can't get it. Same on the paragraph which is being rendered from the data file
...
0
votes
1
answer
36
views
transitioning underline for sub menu items stretch across its container width, not the width of item name
I'm not sure where I've gone wrong but I did have my submenu items with a line after/underneath them which would transition to be the width of the word see here: working
Ive made some changes to class ...
- 9
1
vote
1
answer
65
views
Transitioning an accordion content with "allow-discrete" value for "display" property
I have an accordion in which content is visually hidden and shown using transitions on grid-template-rows from 0fr to 1fr values.
It's inspired by a solution made by Kevin Powell on its youtube ...
- 5,636
0
votes
0
answers
24
views
Scroll Magic transition issues with full screen background videos
I have an issue with animations on scroll magic being funky when scrolling back UP.
So in the JSFiddle attached you'll see the animations looks fine on the way down. However on the way up it sort of ...
0
votes
0
answers
20
views
vue TransitionGroup scaleY() works, but scale() and scaleX() don't
I have a Vue 3.4.27 and with a as an unordered list. If I set the css up to use scaleY(0) it works. If I use scale(0) or scaleX(0) vue is somehow adding a translateX() in so that the it both scales ...
- 585
0
votes
1
answer
63
views
React doesn't trigger animation on position absolute element
I'm trying to add a transition to heroTitle and heroBtn but it doesn't seem to trigger, if I console.log ''element.current'' it shows that the styles have been updated but the current element being ...
- 15