Multiple CSS animation effects in parallel - css

Question

To terrify the guys at Pixar (with my animation skills), I am attempting to get a walking effect to work using CSS ...
Unfortunately, I am unable to work two different animation effects in parallel, I want the steps to rotate at a variable rate to the walkRight transition.
Here is my current attempt:
CSS
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 10s linear 0s;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
Here is an example JsFiddle

Answer 1

You could try to:
Use animation-iteration-count: 10 on hulk class and set is duration to 1s (as walkRight has 10s duration), this means the walk effect will be applied 10 times during the walk.
Prefix all properties using -webkit- to make sure browsers will render your animation properly, you could use autoprefixer (or similar) which does the job for you automatically.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
-webkit-animation-name: walkRight;
animation-name: walkRight;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
-webkit-animation-iteration-count: 10;
animation-iteration-count: 10;
}
#-webkit-keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>

Answer 2

You can use animation-iteration-count on steps animation and set shorter duration. You just need to match ending time for both walk and steps that will repeat itself n number of times, so in this case its about 9 if duration is 1s.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
animation-iteration-count: 9;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>