Q:

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

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.

A:

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.

