CSS3 Animation and Transition Together - html

Question

Here is a test I created to show my situation
http://jsfiddle.net/2vN2S/
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
#keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
#-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
#-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
#-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
body {
display:inline-block;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
animation:myAnim1 5s steps(2, end);
-moz-animation:myAnim1 5s steps(2, end) infinite;
-webkit-animation:myAnim1 5s steps(2, end) infinite;
}
As you can see, I've set up a stepped animation, and a transition for the body background. What I expected was the transition to create the 0.3 second "smoothness" (easing) between each step of the animation, however, it looks like the animation takes the whole control of the background color.
Is there any way to create something like that in an easy way?

Answer 1

Increasing the number of steps works steps(36,end)
Working fiddle http://jsfiddle.net/DeepakKamat/y2vWp/4/

Answer 2

CSS Transitions trigger if the state of the element changes, e.g. it's :hovered or it gets a new class from JS. Steps of CSS animation aren't changes of state, so they don't trigger transitions. Maybe this explanation was wrong and the problem is that one property can't be animated by different mechanisms in the same time.
If you need smooth transitions between steps, you can use an ordinary linear animation instead of step animation, like this:
#keyframes myAnim1 {
0% {
background-color: #212121;
}
45% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
95% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
(edited JSFiddle example)