Questions tagged [css-transitions]

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

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. CSS Transitions were introduced as part of the CSS3 specifications.

How CSS3 Transitions works?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

The following is all the transition properties:

transition - A shorthand property for setting the for transition properties into a single property

transition-delay - Specifies when the transition effect will start

transition-duration - Specifies how many seconds or milliseconds a transition effect takes to complete

transition-property - Specifies the name of the CSS property the transition effect is for

transition-timing-function - Specifies the speed curve of the transition effect


Reference Links and Documents:

  1. CSS3 Transitions - W3C Doc Link

  2. CSS Transitions - MDN Link

6226 questions
2
votes
3 answers

Delay showing of collapse in Bootstrap?

How do you delay showing of collapsed elements in Bootstrap 4? For example ho do you delay showing content of Link href button in the example below?

2
votes
1 answer

How to use element for hovering container div

I think I'm trying to do a pretty simple effect. I have a menu with 4 icons and I would like for the description to slide right when hovering. I'm not sure I'm able to do this with CSS because the div is after the first div's closing tag and I tried…
Maëlle
  • 629
  • 1
  • 11
  • 25
2
votes
2 answers

How to chain jQuery addClass() and removeClass() on an array of elements

What I'm trying to achieve is to queue up some animations (using CSS3 transition and addClass(), removeClass()) on an array of elements. I've tried multiple queueing mechanisms, but unfortunately they do not behave as expected. The correct result is…
VladNeacsu
  • 1,268
  • 16
  • 33
2
votes
3 answers

Unwanted delay on CSS transition. Text underline changes before actual text

I have created a button with a css transition that changes color on :hover. I want the border and shadow of the box, and the text inside the button to transition color at the same time. But it looks like a weird bug, since on :hover the…
eivindml
  • 2,197
  • 7
  • 36
  • 68
2
votes
0 answers

react animation on img src change from an array

I have this react code that changes the img src onClick, it gets the new img src from an array, I now want to add an animation to it using react-motion, Everytime the img src changes I want to play the animation so far I got it working threw a ?…
HMH
  • 157
  • 1
  • 2
  • 11
2
votes
2 answers

Collapsable HTML5 works in FF and Chrome, but not in IE and Edge

The standard collapsable HTML5 semantic markup and work finally flawlessly in FireFox and Chrome, but not in IE and Edge. Any ideas how to fix this with (a tiny bit of light code) for IE and Edge? jQuery 3.x is already loaded in…
Sam
  • 15,254
  • 25
  • 90
  • 145
2
votes
1 answer

Replace the arrow with a Line in bootstrap popover

JSFIDDLE I got this Bootstrap popover working but I have to modify the arrow into a horizontal line. This applies for both left and right side of the popover. Here's a screenshot of what I'm looking to modify into: I believe there's going to be a…
Elaine Byene
  • 3,868
  • 12
  • 50
  • 96
2
votes
1 answer

Prevent blurred border on transition transform scale

I'm working on a navbar animation. On click on the navbar button the red round div get a scale transition to cover all the page. The problem is the bad blurred effect I have on the border while it's scaling up. I've try to use backface-visibility:…
vlk
  • 1,414
  • 1
  • 13
  • 22
2
votes
3 answers

Text color fill CSS transition

I have been trying to get the effect of color fill on text when hover over it, but did not succeed. HTML Fill Color On Text CSS a { color: #000; text-decoration: none; transition: all 0.5s; …
Arun Shah
  • 39
  • 1
  • 2
  • 6
2
votes
1 answer

CSS Transition with Border Radius and Linear Gradient

Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question
scottmgerstl
  • 765
  • 8
  • 18
2
votes
1 answer

CSS: how to apply different animation to same elements?

I have water animation. I want two keyframes to have cubic-bezier(1,.41,.74,.45) and third one to have cubic-bezier(.38,.8,.68,.09). In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there…
Alyona
  • 1,682
  • 2
  • 21
  • 44
2
votes
2 answers

Logo moves a bit after opacity:1

I don't know why the code under here doesn't work here while it works on my website, but you can see it at http://www.bsrp.eu/tijdelijk/index.php . Basicly what happens, is that if you scroll down 1 page, the little logo in the upper-right corner…
Minegolfer
  • 276
  • 4
  • 18
2
votes
2 answers

Why isnt my css transition working?

I've looked over this simple code about hundred times, the transform property is working just fine, but its just snapping in place as if the transition property isnt working, what minor detail do I keep glossing over? Here a jsfiddle with the…
alexis
  • 387
  • 3
  • 19
2
votes
0 answers

Autosize contenteditable element with smooth height transition

The existing questions do not cover this case. Height transition is not working when the text creates more rows. That's probably because I set no height, but I want't to keep changing it according to the text size. How can I create a smooth…
Theodore K.
  • 5,058
  • 4
  • 30
  • 46
2
votes
1 answer

Why does iOS Sfari run this CSS transition's multiple transforms one after the other?

This works perfectly in Chrome and smoothly changes the icons, but in iOS Safari (and possibly desktop Safari), it does them in order, waiting till the other is done before doing the next: Safari Transition: Does the rotation until complete Does…
Don Rhummy
  • 24,730
  • 42
  • 175
  • 330