Stack Overflow
Stack Overflow

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
92
votes
11 answers

How do I normalize the CSS3 transition end events across browsers?

Webkit's transition end event is called webkitTransitionEnd, Firefox is transitionEnd, opera is oTransitionEnd. What is a good way of tackling all of them in pure JS? Should I do browser sniffing? or implement each one separately? Some other way…
methodofaction
  • 70,885
  • 21
  • 151
  • 164
91
votes
9 answers

Hover effect : expand bottom border

I'm trying to get a transition hover effect on border that the border expands on hover. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px…
Vivekraj K R
  • 2,418
  • 2
  • 19
  • 38
85
votes
6 answers

Why does enabling hardware-acceleration in CSS3 slow down performance?

I am moving 10,000 small div elements in a css3 experiment from the top of the browser viewport to the bottom. For this test I use 2 different approaches: With GPU acceleration using translate3D(x, y, z) or translateZ(0) No GPU acceleration by…
Timo Ernst
  • 15,243
  • 23
  • 104
  • 165
84
votes
9 answers

How to prevent Webkit text rendering change during CSS transition

I'm using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its…
RussellUresti
  • 6,211
  • 4
  • 28
  • 26
83
votes
2 answers

Using CSS to transition the fill property of an SVG path on hover

I'm including an SVG image file on my page within an object tag, like this: The image in question is a world map, i want to transition the fill…
David Alsbright
  • 1,526
  • 1
  • 17
  • 31
80
votes
4 answers

Pure CSS scroll animation

I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only. So I've found this tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/ Demo:…
blameless75
  • 2,148
  • 2
  • 19
  • 14
73
votes
5 answers

Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code : img { border-radius: 50%; }
user3597950
  • 9,201
  • 6
  • 26
  • 35
73
votes
7 answers

Is it possible to animate Flexbox inserts & removes?

When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating. Conceptually, since the items are changing their positions, I would expect the transitions to apply. I have set the…
mmaclaurin
  • 1,412
  • 1
  • 13
  • 18
72
votes
7 answers

Animating max-height with CSS transitions

I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames). I'm giving one class max-height: 4em; overflow: hidden; and the other max-height: 255em; (I also tried the value none,…
Madd0g
  • 3,841
  • 5
  • 37
  • 59
67
votes
3 answers

css3 transition delay of specific attribute

at the moment I am styling a textbox by changing its background-color and font color on hover : transition: background-color 1s, color 1s; I would now like to change the color after the background color by using transition-delay. The problem is…
test
  • 2,538
  • 4
  • 35
  • 52
67
votes
7 answers

How To Add CSS3 Transition With HTML5 details/summary tag reveal?

Using just CSS3, is there a way to add a nice fade-in and slide-from-left transition effect on a DETAILS/SUMMARY reveal? For a demo of this new tag, see this demo: details { transition:height 3s ease-in; }
Copyright…
Volomike
  • 23,743
  • 21
  • 113
  • 209
65
votes
9 answers

css transition with linear gradient

I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working. This is the css for my button. a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green),…
Johan Alkstål
  • 5,225
  • 9
  • 36
  • 48
64
votes
8 answers

Using CSS transitions in CSS Grid Layout

I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement. What am I doing wrong? Here's my a working version: http://codepen.io/juanmata/pen/RVMbmr Basically the following code adds the class…
Dan
  • 1,565
  • 3
  • 23
  • 43
62
votes
3 answers

Does Internet Explorer support CSS transitions?

CSS transitions are a very neat way of animating changes in CSS properties. Do any versions of Internet Explorer support them?
David Johnstone
  • 24,300
  • 14
  • 68
  • 71
62
votes
4 answers

Is there an animatable transition-property for css filters?

I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they? Here's an example: http://jsbin.com/onijim/3/
0skar
  • 1,138
  • 1
  • 7
  • 17
1 2
3
…
99 100