Css3 Transition: Different Transition for *In* and *Out* (Or Returning from Transitioned State)

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)

Here is a simplified test case:

div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.

I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.

Demo

If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.

How to implement different transitions in and out of three different states

Here's a crazy idea. Alternate between background-color and background-image. This works in Chrome & Safari. Firefox has not implemented background image transitions.

button {  height: 100px;  width: 400px;  outline: none;  border: none;    background-color: lightgreen;  transition: background-color 1s;}
button:hover {  background-color: green;  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAIAAABRDCAKAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYaBya+xvUAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABNJREFUCNdjZGhgwA+YGBiGjQoAfXAAjqFknA0AAAAASUVORK5CYII=');  transition: background-image 1s;}button:active {  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAIAAABGj2DjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYUHtxWQ7sAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABhJREFUKM9jZEhhIBUwMTCM6hnVM6j1AABGTwCARo/YOwAAAABJRU5ErkJggg==');  transition: 0s;}

<button></button>

Have different transition on enter and exit of class change

Just add a margin-top transition with a delay that lasts the duration of the other animations..

This way it will wait for the other transitions to finish and then try the margin-top (which you do not care about since it will already be invisible.)

.animated-container{
    /*...*/
    transition: opacity .2s, visibility .2s, margin-top 0s .2s;
}

Demo at http://codepen.io/gpetrioli/pen/xbbavJ

Different durations for start and end of transitions?

You need to set the off duration on the non-hover state, and the on duration on the hover.

That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply.
Once you hover off, the properties set on the normal element apply.

.box {  width: 100px;  height: 100px;  background: blue;}.circle {  margin-top: 20px;  width: 80px;  height: 80px;  border-radius: 100%;  background: red;  opacity: 0;  transition: opacity 2s ease;}    .box:hover + .circle {  opacity: 1;  transition-duration:0.5s}

<div class="box"></div><div class="circle"></div>

CSS3 shorthand for transition div 100px from the bottom to the final state

The final state values cannot be appended to the transition property's value like in the code below. The property's values can only be details about which property should be transitioned, the duration of the transition, the delay and timing function etc.

transition: padding 0.25s ease-in-out 1.0s 0 0 100px 0;
                                           ^  
                                           |_ Everything from here on in are incorrect

Another thing to note is, transition is not the right choice for this us-case. Transitions happen only when the properties on an element change due to some action (like :hover, :focus, addition of new class on click using JS etc). There is no pure CSS way to trigger transition on page load. You can use scripting and auto trigger state changes based on time-out but I feel that is unnecessarily complex for something that can be achieved using CSS in a different way.

You have added a delay to the transition but this does not represent the time after which the transition should start automatically. It represents the time that should elapse after the state changes are applied before which the transition can commence.

---

Animations should be used for automatically triggering changes on page load. Unlike transition, they are auto invoked. You can read more about CSS animations here.

For animating an element from 100px below its final resting position to the top, any one of the following properties could be used:

• margin-top
• top (can be used for elements with absolute positioning)
• translateY()

Using margin-top:

.caption {  display: inline-block;  margin-top: 100px;  /* starting position */  animation: move-up 1s linear forwards;            /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */}@keyframes move-up {  to {    margin-top: 0px;  /* final resting position */  }}
/* Just for demo */
.caption {  height: 2em;  width: 10em;  line-height: 2em;  background: tomato;}

<!-- library is only to avoid browser prefixes --><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='caption'>This is a caption</div>

---

Related Topics