CSS3 different custom easing for different properties - html

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? :)

Answer 1

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/
.