CSS3 different custom easing for different properties

Question

I've set up an animation for a certain div.

.Animation
{
-webkit-animation-fill-mode: both; /*and also -moz, -ms etc. */
animation-fill-mode: both;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

@-webkit-keyframes scaleAnimation /*and also -moz, -ms etc. */ 
{ 
0%
{
    opacity: 0;
    -webkit-transform: scale(2);
}

100%
{
    opacity: 1;
    -webkit-transform: scale(1);
}
}

.ScaleAnimation
{
-webkit-animation-name: scaleAnimation;  /*and also -moz, -ms etc. */
animation-name: scaleAnimation;
}

But i want a different custom ease (cubic bezier) for the opacity and another custom ease for the transform. How do I get this to work.

The following didn't work:

transition: opacity 1s ease-in-out;
transition: scale 1s ease-in-out;

So it definitely won't work with a custom ease, cubic-bezier(0.555, -0.130, 0.270, 1.075); for example.

Any thoughts? :)

It should work if you comma separate the transitions e.g. - `transition: opacity 1s ease-in-out, scale 1s cubic-bezier(0.555, -0.130, 0.270, 1.075);` — Paulie_D, Nov 20 '14 at 12:26
possible duplicate of [CSS transition shorthand with multiple properties?](http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties) — Paulie_D, Nov 20 '14 at 12:29
@Paulie_D Unfortunately that doesn't work in this keyframe-setup. Animation won't start. — user2987394, Nov 20 '14 at 13:46

Abhitalks · Accepted Answer · 2014-11-20T12:48:45.200

For transitions, you could specify multiple transitions by comma-separating those.

transition: <duration> <property> <delay> <timing-function>, ....
transition: 1s opacity 1s ease-in-out, 1s scale 1s linear;

If you want to go the animation/keyframe route, then you could create two animation keyframes. One for scale, and the other for opacity. And then comma-separate them in the animation setup for the element.

The property for easing is animation-timing-function. For webkit based browsers (as it seems from your question that you don't mind vendor prefixes), it becomes -webkit-animation-timing-function.

You could set it up like this snippet:

div {
    width: 120px; height: 120px;
    background-color: red;
    display: inline-block;
}

div.d1 {
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s, 2s;
    -webkit-animation-duration: 2s, 2s;
    -webkit-animation-name: scaleAnimation, opacityAnimation;
    -webkit-animation-timing-function: 
        cubic-bezier(0.1, 0.7, 1.0, 0.1),  ease-in;
}

div.d2 {
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s, 2s;
    -webkit-animation-duration: 2s, 2s;
    -webkit-animation-name: scaleAnimation, opacityAnimation;
    -webkit-animation-timing-function: linear linear;
}

@-webkit-keyframes scaleAnimation { 
    0% {
        -webkit-transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes opacityAnimation { 
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<div class="d1">D1</div>
<div class="d2">D2</div>

Fiddle: http://jsfiddle.net/abhitalks/3y7pcd1t/1/

.

Hi @abhitalks thanks for your answer! In your example it are two different's div's. In mine its one div with a different scale and opacity easing. Do you recommend to just wrap one div around another? And then apply one animation to the div and the other one to the wrapper? Or is there a better workaround? Thanks. :) — user2987394, Nov 20 '14 at 13:42
@user2987394: There are two `div` just to show you that different easing is being applied. Having two `div`s makes it easy to compare, isn't it? :) Just remove the second `div` from the fiddle and tweak it to your requirements. — Abhitalks, Nov 20 '14 at 13:44
thanks! Yeah sure, sorry, wrong interpretation of your two div's example. But great, this works perfectly. :) — user2987394, Nov 21 '14 at 12:43

CSS3 different custom easing for different properties

1 Answers1