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
134
votes
16 answers

How to transition CSS display + opacity properties

I have got a problem with a CSS3 animation. .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover…
Alexis Delrieu
  • 1,313
  • 2
  • 10
  • 19
133
votes
9 answers

CSS3 Transition - Fade out effect

I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any…
user2246087
129
votes
1 answer

Difference between CSS3 transitions' ease-in and ease-out

What’s the difference between CSS3 transitions’ ease-in, ease-out, etc.?
Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322
127
votes
6 answers

How do I apply CSS3 transition to all properties except background-position?

I'd like to apply a CSS transition to all properties apart from background-position. I tried to do it this way: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; …
Dine
  • 7,223
  • 8
  • 25
  • 35
125
votes
6 answers

Disable/turn off inherited CSS3 transitions

So I have the following CSS transitions attached to an element: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s…
Scotty
  • 2,635
  • 6
  • 30
  • 39
121
votes
3 answers

CSS: transition opacity on mouse-out?

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; …
matt
  • 42,713
  • 103
  • 264
  • 397
116
votes
9 answers

CSS Animation and Display None

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page. When I attempt this at first…
L84
  • 45,514
  • 58
  • 177
  • 257
110
votes
4 answers

CSS transition when class removed

I have a form that functions as a settings page. When form elements are modified, they are marked as unsaved and have a different border color. When the form is saved, they are marked as saved by having another border color. What I want is that when…
beatgammit
  • 19,817
  • 19
  • 86
  • 129
105
votes
5 answers

Callback on CSS transition

Is it possible to get a notification (like callback) when a CSS transition has been completed?
Pompair
  • 7,083
  • 11
  • 60
  • 69
103
votes
2 answers

How to window.scrollTo() with a smooth effect

I can scroll to 200px using the following btn.addEventListener("click", function(){ window.scrollTo(0,200); }) But I want a smooth scroll effect. How do I do this?
KolaCaine
  • 2,037
  • 5
  • 19
  • 31
97
votes
6 answers

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

http://jsfiddle.net/nicktheandroid/tVHYg/ When hovering .wrapper, it's child element .contents should animate from 0px to it's natural width. Then when the mouse is removed from .wrapper, it should animate back down to 0px. The .wrapper element…
android.nick
  • 11,069
  • 23
  • 77
  • 112
96
votes
2 answers

CSS3 Transitions: Is "transition: all" slower than "transition: x"?

I have a question about rendering speed for the css3 transition property. Suppose I have a number of elements: div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin:…
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
96
votes
5 answers

CSS transition auto height not working

I have a website, and I decided to replace the jquery based toggle boxes with pure CSS snippets. When I use fixed height value for the transition (last lines of the CSS), it works well, but with the auto value, the animation is missing, only the…
Just me
  • 963
  • 1
  • 6
  • 5
94
votes
4 answers

Can CSS3 transition font size?

How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason. Sample code: body p { font-size: 12px; color: #0F9; transition:font-size…
Squirrl
  • 4,909
  • 9
  • 47
  • 85
94
votes
5 answers

CSS how to make an element fade in and then fade out?

I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css: .elementToFadeInAndOut { opacity: 1; transition: opacity 2s linear; } Is there a way I can make the element fade…
user95227
  • 1,853
  • 2
  • 18
  • 36