As of May 31, 2023, we have updated our Code of Conduct.

Questions tagged [css-transitions]

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Filter by
Sorted by
Tagged with
0 votes
2 answers
28 views

Why does transitioning from width: 100% cause the transition to be jumpy?

I made a JSFiddle to reenact this problem. I am trying to get a grid element to grow when hovered, but it causes this weird problem where it goes under the other grid element, then jumps to how I ...
OrdinarilySam's user avatar
1 vote
1 answer
39 views

I tried to trigger a transition with javascript, but is not working,

So, i'm very new to html, css and javascript, and i trying to trigger a transition with javascript, but it's not working, "menu-icon" it's a span tag with a litle image that is inside ...
エレイン's user avatar
0 votes
0 answers
7 views

How can I ensure that my first animation completes before starting another animation using Framer Motion?

I have a div and inside that div I am mapping an array to show list of navlinks inside "p" tag. Each navlink has its own animation, and parent div has its own animation. I basically have ...
Abdullah Abbasi's user avatar
0 votes
0 answers
19 views

Show modal pop up with animation Vue

I'm trying to make an appearance animation with Vue. making the modal pop up element appear from opacity: 0, to opacity: 1, changing dynamically the styles, depending on the state value. What am I ...
john's user avatar
  • 1
0 votes
1 answer
29 views

Javascript event.offset alternative for final value during CSS scale & transition

I have an HTML image that I want to pan & zoom programatically. In order to improve the experience, I added a CSS transition for smoothness. When I click on the image, I need to determine the ...
Andrei Cioara's user avatar
0 votes
2 answers
55 views

Slide image vanish before making the transition

I have an image slider with 4 images. To navigate between them there are 2 ways: 2 buttons in the corners of the slider and a small slider indicator to choose an image represented as dots in the ...
Starnec's user avatar
  • 539
0 votes
0 answers
31 views

Adding a child element to a container resets any ongoing css property transitions in other child elements

I have a script that creates a <span> every 1,000 ms, adding it to a <p> element through its appendChild function. The transition for opacity for these spans is set at 3,000 ms, and I have ...
calua's user avatar
  • 1
0 votes
0 answers
34 views

CSS: How to apply transition to variable

So I have this spinning crystal that spins at one revolution per 10 seconds, but while the mouse is hovering over it I want the seconds per revolution to gradually ramp down to 5 seconds, ie. spin ...
halsemarathmellsphv's user avatar
0 votes
1 answer
43 views

Can I fix a background-image to its parent?

I'm making a carousel/slider and want to center the images. When I use background-position: center; they get stretched when I change the width. Can't figure out how to center the images and not ...
tama3ti's user avatar
0 votes
0 answers
12 views

Vue3 Transition not working for Router-Link within Route

The other day I was trying to setup a vue-router page. The basic idea is that you have on each route a button to go to another one. I tried to animate those with simple fade transitions and while the ...
user7439672's user avatar
1 vote
1 answer
43 views

Css - apply transition in scrollbar-thumb pseudo element

I would like to apply a simple transition effect when hovering the mouse over the scroll-y in a div! When I hover over the ::-webkit-scrollbar-thumb the effects are applied, except for the transition ...
Wesley Moraes's user avatar
0 votes
0 answers
32 views

CSS max-height transition for dropdowns not working in mobile/hamburger view of a responsive menu

Apologies if you've read something like this from me recently, but I've changed the code a bunch and gone through different problems and wanted to start fresh instead of continually re-editing and ...
CKlemow's user avatar
  • 11
0 votes
1 answer
59 views

How to use the View Transition API (web) for transition elements that are not the same DOM element?

I have a thumbnail DOM element that needs to transition into the modal DOM element that opens when that thumbnail is clicked. The thumbnail and the modal are NOT the same DOM element. For this I want ...
Coen Bakker's user avatar
4 votes
1 answer
46 views

z-index and translate 3d not work the same in chrome and safari

I experience a browser compatible issue and and found it is caused by Google chrome and Safari process z-index and translate 3D differently. I make a minimum example here: <div> <div ...
Xingce Bao's user avatar
-2 votes
1 answer
19 views

Logo in the footer section need to be turn into thier contrast color

my footer is dark and github logo is also black, yeah that black github logo in footer that partially visible but when cursor move over thir it goes invisible if move cursor on that github logo it ...
Dnyanesh's user avatar
-1 votes
1 answer
37 views

How to rorate the image of a background in CSS? [closed]

I have a hexagon background image. I want to rotate the hexagon image so that the dashed line moves to a different side. I tried to use the ::nth-child pseudo-class, but it did not work. Here is what ...
Jay's user avatar
  • 1,081
1 vote
1 answer
74 views

Any way to make Tailwind rotate transition work?

I am trying to smoothly rotate this chevron-icon: <div class="w-[18px] ml-6 mr-2 text-slate-500 transition-all" :class="{ 'rotate-180': store.accountMenu }"> <svg ...
Artur Müller Romanov's user avatar
2 votes
1 answer
50 views

How do transitions work on Images in Vue JS 3?

I have been unable to apply a fade in transition to an image using Vue JS 3. The transition works fine with text, but the image just loads and renders as it would normally without a transition applied....
jban28's user avatar
  • 23
0 votes
2 answers
37 views

CSS transition fails when class of sticky element changes

I want to do a transition when the element gets sticky. But it can't be done with this below code. const content = document.querySelector('.contents'); const initalPos = content.offsetTop; window....
Jordy's user avatar
  • 1,822
0 votes
0 answers
85 views

next.js 13 loading component add transition

I'm trying to add a transition animation to the loading component that comes with next.js 13. but as soon as I click on the link, the inside of the page is emptied and the back part remains blank. you ...
codeko's user avatar
  • 41
0 votes
1 answer
147 views

How to make auto horizontal scroll in react

I am working on one small thing where I have to make my divs (card) scroll horizontally with animation kind of without any button click. What I am trying to achieve I have some data of countries, ...
manish thakur's user avatar
0 votes
0 answers
26 views

Tap/Mobile solution for buttons which reveal link with "hover"

I have a set of buttons which flip over onhover to reveal the link. I thought I could modify them to work on touch devices too, but I'm striggling. Ideally, I would like the mobile/touch user to be ...
UnluckyForSome1's user avatar
0 votes
1 answer
39 views

How to zoom on text on hover using scss and html

I'm newer to HTML, and I am curious about hover effects currently. I want text on hover to scale up 1.5 in 0.2s. It didn't do anything. It could be an issue with the SCSS. Here is the code: ...
Reagan_A's user avatar
-1 votes
1 answer
24 views

Transition/animation not working if element is before the toggle

I want to animate the visibility of a few elements, and I isolated this code to show that only the elements after the toggle work, not the ones before (the thing I would need): is there any ...
Andrea's user avatar
  • 555
1 vote
1 answer
154 views

Tailwind CSS Navbar controlled by scroll with animation

I made a function that controls Navbar. It hides when user scroll down and it shows when user scrolls up but i can't figure out how to add animation to this with Tailwind CSS ? That's my first project ...
DrSpliff's user avatar
0 votes
0 answers
26 views

Transition not applying for width in Tailwindcss v2

I'm using Tailwndcss in my React Project. I want to change the width of the div depending on the value of useState hook. It's working but the width changes suddenly despite of adding transition ...
Fuaad's user avatar
  • 131
0 votes
1 answer
43 views

Transition on a container with a background-image make text flickering

I have a bug that make flickering the text elements inside a container who has a background-image when a transition on the container occur. I have the issue in Chrome and Microsoft Edge. Firefox doesn'...
xGeekoo's user avatar
0 votes
1 answer
24 views

smooth transition when switching to position fixed nav

Looking for a way to smooth the transition from position: relative to position: fixed. It's jumping positions at the moment. Please suggest a way to do this. Here is an example: var offset = ...
virat's user avatar
  • 105
0 votes
0 answers
22 views

flipbook unable to go backward in pages

Currently I'm trying to create my own flipbook from scratch. The flipbook works when going forward in pages but when going backwards, the flipbook either does not render the image at all or render it ...
lamy_enjoyer's user avatar
1 vote
0 answers
74 views

Giving transition animations to loading components that come with next.js 13

I want to make a transition animation for the loading component that increases the opacity from 0 to 1. The animation works, but when it goes to the next page, it empties the page and a blank page ...
user avatar
0 votes
0 answers
9 views

Safari - CSS Transition does not fire during onbeforeunload

I'm trying to implement page transitions using onbeforeunload by adding/removing a class from my code to trigger a CSS animation. It works in Firefox and Chrome, but not in Safari. I see that the &...
John Furness's user avatar
0 votes
1 answer
41 views

Transition doesn't work in React (CRA) app

I need the bottom of the text to be grayed out, and long text to be cut off at a specific height. There's a button that, when clicked, should expand this section. Everything works fine except for the ...
Anatoly's user avatar
  • 5,026
1 vote
1 answer
37 views

Transform and Transition not working with each other in CSS

I have looked into other stack overflow answers but either I don't really understand them or they are providing different workarounds for a quite different problem. In my case, transitions are working ...
19BEC056ANUBHAVSINGH's user avatar
0 votes
0 answers
44 views

svg animation with css not working on safari

I am trying to animate a SVG on scroll. It is mostly CSS for the transition. The CSS works well on android and windows but breaks on all Apple devices. I have included the vendor prefixes as well and ...
ratul keot's user avatar
1 vote
3 answers
87 views

How can I use CSS transitions and JavaScript to make an element jump up in size instantly, then scale down smoothly?

I have a widget on my page, which is a span element, styled as follows: span.widget { line-height: 0; font-size: 150%; transition: font-size 1s; } I have JavaScript which modifies its font-size:...
cazort's user avatar
  • 516
0 votes
1 answer
44 views

How can I stop text from overlapping when a transition takes place

I have two paragraphs of elements on the same line. When the container gets too small to fit both of them, the first paragraph starts to become an ellipsis. I also have a check mark that slides in ...
Rob's user avatar
  • 1
0 votes
1 answer
36 views

Css transition fixed width vs max-width

I have 2 examples. First one has fixed width to 400px and expands with transition, second one has max-width and does not expand with transtion. But if I check offsetWidth before transtion, they both ...
Toniq's user avatar
  • 4,436
0 votes
1 answer
46 views

Flip animation using chrome's View Transition API not animating background color smoothly

I have a simple div that has a background colour and text. Upon a state change, I update this element in the DOM to have a different background colour and text (done via HTMX). I want to use Chrome's ...
David Masters's user avatar
0 votes
1 answer
43 views

How to make an element smoothly expand itself?

I need the deepest li>span text to smoothly expand itself as I'm hovering on the div with li class. ul { list-style-type: none; } .kinds { width: 600px; margin-left: auto; margin-right:...
havaka's user avatar
  • 3
0 votes
0 answers
137 views

React (NextJS) component not playing transition animation on first render

I have a simple functional component using modules pattern to apply styles. Component receives a number (targetView) as prop indicating that which view number is for displaying this component. I use ...
Jeekim's user avatar
  • 541
1 vote
1 answer
42 views

Make a Transition when Toggling Classes in CSS and JS

I want to make a slideshow with images that have text on them and I wan to change the shown image with a next and previous button. I want the images to have an opacity transition when switching ...
Zagro's user avatar
  • 15
1 vote
1 answer
32 views

SVG Opacity Transitions briefly go further than the CSS rules tell them to and appear to jump around

I'm currently trying to get an SVG rect (in an svg embedded in html) to fade in when hovered over. I've noticed that the transition is extremely jumpy and at times goes outside of the range of values ...
EKW's user avatar
  • 2,049
1 vote
1 answer
155 views

Wait with transition for element to be dropped @dnd-kit React

I'm using @dnd-kit in my React project and I try to insert elements from lower list to the upper list. I want to control the transition of placeholder to wait until the element gets inserted, so it ...
imalgrab's user avatar
0 votes
0 answers
18 views

animate css grid span

I want to be able to animate whenever i change the grid-column. I created a small example here: https://codepen.io/cglantschnig/pen/YzOmEXm Basically I want to animate something like that. .item....
Safari's user avatar
  • 3,302
1 vote
3 answers
125 views

css animate rotate property as linear transition

is it posible, to animate css rotate as linear transition (take start and end points of transition and use them like a keyframes where points go straight forward to their final position)? for example:...
vanilla's user avatar
  • 43
0 votes
1 answer
161 views

How do I make a smooth background-color change in Tailwind on hover?

I'm trying to change the background color of an element on hover. Normally, I would use className='bg-white hover:bg-black' This changes the color instantly, but I would like to add 150ms of ...
dopecello's user avatar
0 votes
0 answers
33 views

how to improve performance on dom element css width transition, which has large content inside

what I'm implementing is just a simple flex layout with a left-side menu and a main screen on the right. demo: https://codesandbox.io/s/fragrant-sunset-fj80cz clicking the toggle button can trigger ...
Littlee's user avatar
  • 3,713
0 votes
1 answer
84 views

Can we animate grid-column-start with a CSS transition?

I'm trying to animate a change that happens on click via javascript, ideally without having to refactor lots of my project. The code structure is like this: #container { display: grid; width: ...
suryanaga's user avatar
  • 3,662
0 votes
0 answers
95 views

mantine accordion transition mobile browsers not working

I'm using the Mantine Accordion https://mantine.dev/core/accordion/ in my application. When you open the accordion, there is a transition effect/prop that works on desktop browsers, but not on mobile ...
Mika Manelka's user avatar
0 votes
0 answers
26 views

Jquery change image when a divs are hovered

I have a hover behavior that works fine in my test => https://jsfiddle.net/5ctav8rx/ but doesn't work in unbounce. My JS code is below. $(document).ready(function() { $(".title-para").hover(...
xmunchaser's user avatar

1
2 3 4 5
124