Questions tagged [css-transitions]
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
5,920
questions
0
votes
0
answers
40
views
Firefox 100: CSS 3D Transform rotateY(180deg) and SVG not playing well together
This may be a browser-bug relating to how Firefox Desktop 100.0.2. handles SVG and CSS Transforms.
Or else I'm doing something wrong to bring about this undesired effect.
I have a <button> ...
-1
votes
0
answers
22
views
How to shift html element into ready place, not by pixels?
I have an issue to move a bunch of cards into one place, so it kinda difficult to config for all of them (6 count) translateX and translateY.
I want to get this way as on the photo.
enter image ...
2
votes
1
answer
45
views
CSS transition not working with classList.add
Good, I’ve been an hour and I’m going crazy (I’m new)
I have a button that when pressed shows a div . Fixed sidemenu, this occupies 100% high and wide and contains two divs, one that does black ...
1
vote
1
answer
20
views
how to add 2 transition in CSS but none of the m work?
I am very new and learning CSS .
I am trying to make this work but for some reason I can't.
I would appreciate any help.
Here what I have:
<!DOCTYPE html>
<html>
<head>
<style&...
-2
votes
0
answers
29
views
Images are swapped using a smooth transition
I have a scenario where the images are swapped based on the value of a flag, what I need now is a smooth transition between when images change/load.How can I achieve this using css?I do not have a ...
1
vote
1
answer
32
views
On hovering any elements transform all the elements
I have 3 elements: svg, p and p
HTML code
<svg xmlns="http://www.w3.org/2000/svg" class="absolute top-1/4 left-12" width="335.312" height="119.152" viewBox=&...
0
votes
2
answers
26
views
CSS Transition - why does my code not work? [closed]
Quite a simple one but I'm sure I'm doing something wrong; the following code doesn't work in either Chrome or Firefox (ie, it displays as would be expected without the transition property, with the ...
0
votes
0
answers
26
views
Elements in flexbox div snap their position if another element is removed
I have a flex div with flex-direction set to either column or column-reverse and align-items set to flex-start or flex-end. This makes the children inside it stack to a top/bottom - left/right ...
0
votes
0
answers
17
views
Transition on show/hide scrollable Div
Having a div with dynamic content of scrollable logs, how can I make a transition when it shows/hide
I need its height gradually increase/decrease.
<div className={logsClass}>
<div ...
0
votes
0
answers
23
views
Why multiple css transitions and transition delay doesn't work together?
I'm trying to run few transitions. one after another(of course not all of them in parallel). But no matter how much I try, nothing works perfectly. If one works, another one breaks.
Expected sequence ...
0
votes
1
answer
20
views
CSS transitions always start at user agent style sheet
I'm currently fiddling with a website, and I wanted to animate a button's background color on hover. Unfortunately, the button will always start as white (browser default, Firefox) and transition into ...
0
votes
1
answer
24
views
left transition not working both ways (works left to right but not the other way around)
I use position relative and absolute on the switch and handle respectively, then use left on the handle to move it to the end or start of 'cSwitch' but the transition duration i applied only works ...
0
votes
2
answers
23
views
Can you have different transition times on the same transition property?
I have a settings button (img with an icon as the src) that I want to spin when the cursor is hovering, and then scale down and back to normal when the user presses on it.
#settings-button:hover {
...
1
vote
1
answer
22
views
Is it possible to make a smooth transition from a numeric value of width to a non-numeric value and/or viceversa?
My intention is to have a round colored bullet centered under some text, or an underline as long as the text, depending on the size of the viewport; and a smooth transition should occur between the ...
0
votes
0
answers
35
views
Why does this CSS position transition slightly overshoot the desired end position, based on a DOMRect?
I am attempting a visual effect of dislocating a div from one container to another, both also divs in this case. To do this, I first obtain the DOMRect from the initial position. Then, I briefly add a ...
0
votes
1
answer
25
views
VueJs and transition
I have several child components rendered by a v-for
<div v-for="(pass) in scoringPass" :key="pass.decision">
<Pass :pass="pass"/>
</div>
And ...
0
votes
0
answers
19
views
How to have animated transitions on two different axis using React Router V6 and TransitionGroup?
I have a layout like this one.
+----------+----------+----------+----------+
| HOMEPAGE | PAGE-X-1 | PAGE-X-2 | PAGE-X-3 |
+----------+----------+----------+----------+
| PAGE-Y-1 |
+----------+
| ...
0
votes
1
answer
34
views
how to apply transition to arc increase in svg
I am trying to apply a transition effect to an svg I have, but I am not sure how to do this.
Basically I would like to apply transition: width 2s ease; when I increase the arc size in the following ...
0
votes
0
answers
6
views
Div height change not correctly affected by css transition
I have a div that I want to transition when I add to it's innerHTML. It's height grows from 0 when added to, so I think transitioning it's height is reasonable.
<style>
.transitions {
...
2
votes
1
answer
26
views
overflow: hidden doesn't work on :after and :before pseudo elements
I am making this rounded scroll down button with an arrow inside. On hover I wanted to apply an animation that makes the arrow go from above to below the rounded div, and it should be hidden when ...
1
vote
1
answer
80
views
Transition a div height when the content is updated by livewire
So we got a div with a Livewire component to choose languages :
<div>
@livewire('multiple-languages', [ ... ])
</div>
When the user selects a language in the component, it changes its ...
0
votes
1
answer
25
views
How to add transitions to a drop down menu?
I have a drop-down menu that makes text appear when clicked. However, when I add transitions to it, nothing happens. It still just shows up without sliding down. I want the transition to show the text ...
1
vote
2
answers
49
views
React add image on mouse hover, smooth transition
Problem Description
I am trying to find a way to, whenever a mouse enters a div, for an image to appear gradually, and equivalently, disappear slowly when the mouse leaves.
function App() {
...
0
votes
0
answers
22
views
React CSSTransition routing is not working
I'm trying to make a transition when goes the new page.
function Router() {
return <div>
<BrowserRouter>
<Routes>
<Route render={({ location }) =>
...
0
votes
1
answer
46
views
Change color of text when div is transitioning through it
I want to implement a navbar element highlight using a div that moves (via transitions) to the selected element when you click on it.
But in addition, it should change the color of the text it passes ...
0
votes
2
answers
31
views
CSSTransition not working despite modal gets mounted and unmounted
It is working as my modalOverlay gets mounted and unmounted based on the state props.show it recieves from parent. but the transitions are not happening. I want modalOverlay to have opacity of 0 to 0....
0
votes
2
answers
46
views
Radio button animation , transition not working
.container3 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container3 .materiali {
padding: 8px 48px;
margin: 8px;
font-family: ...
1
vote
1
answer
62
views
Make elements fade In with every call of onClick function with CSS
With every Click on the page a new element of verses gets displayed. Now I am trying to let the different Textparts fade in. Is there an easy way to do this with my CSS? I already tried to add
...
0
votes
0
answers
14
views
How to pause transition / transformation effect momentarily in JS?
I am trying a simple animation effect of a flipping card using CSS and JS and I tried this approach (that is not working):
CSS:
.card {
user-select: none;
-webkit-user-select: none;
-khtml-...
0
votes
1
answer
37
views
Why does this element not travel at a consistent speed?
I'm making a program that moves an element to a random point at a speed of 50px per second (and loops once it reaches that point). I've done the math, but the speeds it travels are inconsistent.
//...
1
vote
0
answers
19
views
Is there any way to animate a conic-gradient in CSS?
I have a circular graph that I want to use to track progress. I use this SASS definition:
@for $i from 0 through 100
.circle-chart-#{$i}
background: conic-gradient($cyan $i * 1%, $...
1
vote
1
answer
77
views
React-Router different animation for each route
I'm struggling to make React-Router work well with CSSTransition, which seems to be the defacto library for this around the web.
I'm using React-Router v6 without any issue. I'm not sure if the issue ...
0
votes
1
answer
36
views
Smooth blend/transition between images on mousemove
Recently I've approached a website where on mousemove the background is changing nicely, it is somehow connected with the mouse position. Please take a look here.
In fact there are only two images ...
0
votes
3
answers
78
views
CSS transition for a background-image on hover?
I am working on webpage where I want to use background image on hover effect, however I have some issue. Image is display on hover with tranisiton but when I move back my mouse then transition is not ...
0
votes
1
answer
36
views
Focus transition animation for outline not working when Unfocusing HTML Input
I have a basic input that I am trying to have a nice outline highlight for, but for whatever reason the unfocus animation does not happen.
What am I missing here?
I even commented out the all: unset ...
-1
votes
1
answer
27
views
How to fix my CSS button transitioning only to the right and bottom direction and making it transition in all directions?
I'm looking for a way to transition the Orange button in all four directions,
not just the right and bottom directions if anyone can assist me with
the code.
div {
position: relative;
...
0
votes
2
answers
42
views
What is the best way for a smooth transition from 'relative' position to 'fixed' even if it is faked (fullscreen like effect)? [duplicate]
despite the fact that it's a simple question, I didn't find any satisfying answer yet.
I have a video element on screen that has position relative. When the user click on that element it should become ...
0
votes
1
answer
26
views
Transition the height of an onclick drop down text with css and js
I tried to make a section where I talk about my hobbies etc., but the text was a bit too much, so I decided, that you only read the first sentence and can click it to read the whole text. I used some ...
0
votes
2
answers
54
views
How to animate a div to move from the top of a flexbox to the bottom
I have a container div that is a flexbox, Inside that flexbox I have three columns. I want to animate the cube shape from the top to the bottom. However, using translateY() it only moves the cube down ...
0
votes
1
answer
37
views
How I can change color of the range track without using javascript only pure css?
Please advise on this, I am not able to find any info which can help me to change the left side color (red) of the track.
It will be good if its in a pure CSS.
Like below image.
https://codepen.io/...
1
vote
1
answer
35
views
Adding transition to the activeclass in react router v6
In my navbar i added an activeclass so in case a link was chosen a line at the bottom of the link is displayed , im trying to add a transition property to this class change , preferably the line ...
-1
votes
2
answers
47
views
Transforming and tranisitions in CSS | Transition not working
I have the following css file
body {
font-family: Baskerville;
background: #ecf0f1;
color: #2c3e50;
}
h1 {
margin: 16px 0;
padding-left: 16px;
border-left: 5px solid #e74c3c;
...
1
vote
1
answer
155
views
Transition max-height with TailwindCSS arbitrary values
I'm trying to animate the max-height of a div from 0 to 100% using Tailwind's arbitrary values feature, but it's not working:
document.getElementById("toggle").addEventListener("click", () => {
...
0
votes
2
answers
33
views
Hiding 3 elements in sequence not working using JavaScript "transitionend" event?
WHAT. I have 3 boxes: blue, red and black and I'm trying to transition them one after another, using JavaScript event listeners, in the following order: black, red and then blue.
HOW: https://codepen....
1
vote
0
answers
35
views
Using CSS to move elements opposite of Mouse
I want to achieve a CSS mouse effect where:
-if the mouse hovers leftwards on the element, the element moves right.
-if the mouse hovers rightwards on the element, the element moves left.
-if the ...
0
votes
1
answer
38
views
Sequencing css transitions
I try to manage how to have a sequence of 2 change of position/size of an element with different transition parameters.
My example is to zoom out a blue box when I click on a red box, the zooming ...
0
votes
1
answer
52
views
How to replace text in css?
I was taking a test in fiverr. There I got the following question:
Consider the following code:
body{text-replace: "a" "b" "b" "c"}
What will be the output of ...
1
vote
0
answers
36
views
How to use transition-timing-function: ease to create ease-in transitions
For a digital comic strip that I want to develop, I wonder if it's possible to create ease-ins or ease-outs with transition-timing-function: ease.
I inserted transition-timing-function in an old "...
0
votes
1
answer
45
views
How to center a div while using transition and transform with scale
I have build a popup for my React app and I do not want to use any external library.
Now I am trying to use transition and transform with scale and then calculate the popup width and height and center ...
0
votes
0
answers
55
views
MUI TextField size growing through div transition
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the ...