Css3: Two Transitions with Different Timing Functions (Css3)

css3: two transitions with different timing functions (css3)

In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself.

demo

HTML:

<div class='wrap'>
  <div class='el'></div>
</div>

Relevant CSS:

.wrap {
  transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}
.el {
  transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}
.wrap:hover { transform: scale(2,2); }
.wrap:hover .el { transform: translateX(-50px); }

Not sure it's a better idea than simulating a translateX by using left.

Another idea would be not to use a transition, but an animation and set the keyframes such that to obtain the desired effect.

How to have multiple CSS transitions on an element?

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:

transition: color .2s linear, text-shadow .2s linear;

This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

CSS: can two transitions run simultaneously?

Change position of .slides to absolute. That does the trick as both transitions were running simultaneously after all, but the images were not on top of each other.
Setting the z-index as suggested elsewhere doesn't change anything. However, setting the keyframes to the left side prevents a position jump when the javascript removes the transition class.

Changed CSS:

.slides 
    {
    position:absolute;
    top: 0;
    display:none;
    height: 100%;
    width: auto;
    margin: auto;
    opacity:1;
    border: 2px solid #BBBBBB;
    transition: opacity 1.5s; 
    z-index: 0;
    }

.slides.fadeOut 
    {
    opacity:0.0;
    }

.w3-animate-right
    {
    position: absolute;
    animation: animateright 2s;
    }

@keyframes animateright
    {
    from
        {
        left: 480px;
        opacity: 0
        }

     to
        {
        left: 0;
        opacity: 1
        }
    }

CSS transition shorthand with multiple properties?

Syntax:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Note that the duration must come before the delay, if the latter is specified.

Individual transitions combined in shorthand declarations:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Or just transition them all:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Here is a straightforward example. Here is another one with the delay property.

Edit: previously listed here were the compatibilities and known issues regarding transition. Removed for readability.

Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.

If you still want to be sure, refer to http://caniuse.com/css-transitions

Multiple, simultaneous CSS3 transform transitions at varied speeds

Don't think you can do it the way you are attempting. Possible solutions would be a wrapper object

eg

Multiple transitions

sample fiddle here

sample code (HTML)

<div class="wrap">
<div class="inner"></div>
</div>

and CSS

.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
.wrap:hover {
    transform: scale(1.5);
}
.wrap:hover .inner {
    transform: rotate(45deg);
}

or use animations and keyframes as mentioned in answer by @slynagh

Just out of note, the transform property doesn't seem to work when used in transition on chrome (i.m on V33), but it works fine on IE11, thats all I have tested this on

CSS transitions for multiple properties

You have correctly added a transition to the html element that is going to be "transitioned" from state x to state y. To engage multiple css properties, use commas, like this example:

transition: width 2s, height 2s, background-color 2s, transform 2s;

How to delay one transition but not the other?

Solution

The transition-delay function can only be parsed as the second timing value.

Instead of this:

transition: transform 2s, opacity .1s;

Work with this:

transition: transform 2s 0s, opacity 0s 2s;

Explanation

When working with the transition shorthand property, the order and presence of components matter. Here's the basic order and composition:

<transition-property> <transition-duration> <transition-timing-function> <transition-delay>

If the transition-property component is left out, the shorthand property applies all.

If the transition-timing-function component is left out, the shorthand applies ease.

(Both are the initial values of the respective properties.)

So you can minimize the declaration to this:

<transition-duration> <transition-delay>

If only one value is declared (like in your code), it will always be applied to transition-duration.

So with this:

transition: transform 2s, opacity .1s;

... you're applying a timing duration to both properties.

The transition-delay function can only be parsed as the second timing value.

Per your question:

I want only the opacity to have a delay but I can only make it where both of the transitions do.

Then do this instead:

transition: transform 2s 0s, opacity 0s 2s;

revised fiddle

#circle {  background-color: black;  background-image: url('https://media.giphy.com/media/eNMHeFodYv8Os/giphy.gif');  height: 300px;  width: 300px;  border-radius: 100%;  margin: 0 auto;  perspective: 1000;  /* transition:transform 2s, opacity .1s; */  transition: transform 2s 0s, opacity 0s 2s;}#circle:hover {  perspective: 1000px;  transform: rotateY(180deg);  opacity: .25;}#cloud {  height: 70px;  padding: 10px;  position: relative;  left: 10%;  top: 105px;}#temp {  font-family: 'Slabo 27px', serif;  position: relative;  left: 45%;  font-size: 100px;  bottom: 100px;  color: white;}

<div id='circle'>  <img src='http://www.freeiconspng.com/uploads/rain-cloud-icon-5.png' id='cloud'>  <h2 id='temp'>54°</h2></div>

Is it possible to have different transitions for the same animation?

The transition property doesn't do anything inside of keyframes. You can either use the transition property to specify how the paint transitions between selectors/transforms (ie, default and :hover), or you can use keyframes to specify how it transforms over time range (ie, from/to, or 0%, 50%, 100% etc).

When you think about it, they're two separate ways of expressing the same information.

You can use the animation-timing-function property in the individual keyframes if you want more control over transitions. Just know it wasn't supported in Safari (iOS/OSX) until around 2015, so you might run into trouble if you need to support those versions.

Combination of animation and transition not working properly

This is sort of a known behavior with Chrome. Firefox does seem to be able to handle the removal of animation smoothly with transition but Chrome doesn't do so. I had seen this behavior happen earlier also in this thread.

Why does removal of an animation not work with transition in Chrome?

While I cannot provide a 100% fool-proof explanation of why this happens, we can decode it to some extent based on this HTML5Rocks article about Accelerated rendering in Chrome and this one about GPU accelerated compositing in Chrome.

What seems to happen is that the element gets its own rendering layer because it has explicit position property set on it. When a layer (or part of it) gets invalidated due to animation, Chrome only repaints that layer which is affected by the change. When you open the Chrome Developer Console, switch on "Show Paint Rects" option, you would see that when the animation is happening Chrome only paints the actual element that is getting animated.

However, at the start and end of animation a whole page repaint is happening which puts the element back into its original position immediately and thus overriding the transition behavior.

$('button').click(function(){  $('div').toggleClass('clicked');});

div{  background-color: #ccc;  height: 100px;  width: 100px;  transition-property: top, left;  transition-duration: 1s;  transition-timing-function: linear;  position: relative;  top: 0;  left: 0;}.clicked{  animation-name: clicked;  animation-duration: 1s;  animation-timing-function: linear;  animation-fill-mode: forwards;}@keyframes clicked{  0% {top: 0; left: 0;}  100% {top: 100px; left: 100px;}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button">Click Me!</button><div></div>