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

Question

I'm trying to create an animation with many steps.
I want a different value of transition for each change of style state.

However, using transition inside @keyframes has no effect.

.square {
  background-color: #333;
  height: 100px;
  width: 100px;
  animation: 4s move infinite;
}
@keyframes move {
  0% {
    transition: ease-in;
  }
  50% {
    transform: translate(100%);
    transition: ease-out;
  } 100% {
    transform: translate(0);
    transition: cubic-bezier(0.25, 0.1, 0.6, 1.8);
  }
}

<div class="square"></div>

I wonder if there is a way to have different transitions for each stage of an animation without having to combine multiple animation in wrapped elements.

You are allowed to use `animation-easing-function` at each step of your animation, but `transition` won't do anything. — chriskirknielsen, Feb 24 '20 at 20:27
Yes! I don't know why I always ignored this property. Thanks. — Azametzin, Feb 24 '20 at 20:38

Afrophysics · Accepted Answer · 2020-02-24T20:31:38.667

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.

``animation-timing-function`` is the way. Thanks for the support information too. — Azametzin, Feb 24 '20 at 20:42

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

1 Answers1