CSS3 Animation and Transition Together

[volvo]

Here is a test I created to show my situationhttp://jsfiddle.net/2vN2S/\[code\]/* 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 elementsNotice 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;}\[/code\]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?