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
2829
votes
44 answers

How can I transition height: 0; to height: auto; using CSS?

I am trying to make a
    slide down using CSS transitions. The
      starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height:…
Hailwood
  • 89,623
  • 107
  • 270
  • 423
1922
votes
38 answers

Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you…
RichardTape
  • 20,865
  • 5
  • 24
  • 29
648
votes
7 answers

CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; …
Gregory Bolkenstijn
  • 10,003
  • 7
  • 36
  • 38
537
votes
4 answers

Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect…
user1556266
  • 5,373
  • 3
  • 14
  • 5
449
votes
8 answers

How to have multiple CSS transitions on an element?

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5…
Eric Thoma
  • 5,905
  • 6
  • 30
  • 40
275
votes
20 answers

Use CSS3 transitions with gradient backgrounds

I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an…
alt
  • 13,357
  • 19
  • 80
  • 120
269
votes
13 answers

css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript? This is kind of what I want, but on page load: image-slider.html What I found so far CSS3 transition-delay, a way to delay effects on elements. Only works on…
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
242
votes
6 answers

CSS 3 slide-in from left transition

Is there a cross browser solution to produce a slide-in transition with CSS only, no javascript? Below is an example of the html content:
Gimmy
  • 3,781
  • 2
  • 18
  • 27
219
votes
6 answers

How to use jQuery to wait for the end of CSS3 transitions?

I'd like to fade out an element (transitioning its opacity to 0) and then when finished remove the element from the DOM. In jQuery this is straight forward since you can specify the "Remove" to happen after an animation completes. But if I wish to…
C.J.
  • 6,789
  • 7
  • 36
  • 45
192
votes
6 answers

CSS3 transition events

Are there any events fired by an element to check whether a css3 transition has started or end?
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
182
votes
12 answers

CSS: Animation vs. Transition

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and…
Code Poet
  • 11,227
  • 19
  • 64
  • 97
175
votes
8 answers

Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition:…
devongovett
  • 4,850
  • 5
  • 34
  • 35
153
votes
5 answers

CSS transition with visibility not working

In the fiddle below, I've a transition on visibility and opacity separately. The latter works but the former doesn't. Moreover, in case of visibility, the transition time is interpreted as delay on hover out. Happens in both Chrome & Firefox. Is…
user4150760
  • 2,739
  • 5
  • 18
  • 25
149
votes
13 answers

CSS3 background image transition

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background:…
Nick Zani
  • 1,491
  • 2
  • 10
  • 3
135
votes
5 answers

CSS Transition doesn't work with top, bottom, left, right

I have an element with style position: relative; transition: all 2s ease 0s; Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves…
php_nub_qq
  • 15,199
  • 21
  • 74
  • 144
1
2 3
99 100