CSS3 transition events
Are there any events fired by an element to check whether a css3 transition has started or end? 6 Answers 6
css-transitions
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: <div> <img id=”slide” src=”http://…/img.jpg /> </div> 5 Answers 5
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 animate using CSS3 transitions is there anyway to know when … Read more
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: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html What I found so far CSS3 transition-delay, a way to delay effects on elements. Only works on hover. CSS3 Keyframe, works on load but are extremly slow. Not useful … Read more
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 image too, it won’t transition the image either. I know … Read more
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 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color … Read more
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 mentioned. An archived copy can be viewed on the Wayback … Read more
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; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { … Read more
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 can’t do any sort of transition from display: none to display: block (or any combination). Is … Read more
How can I transition height: 0; to height: auto; using CSS?
I am trying to make a <ul> slide down using CSS transitions. The <ul> 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: auto;, then it will slide up to height: 0;, … Read more
