Question

I am tying to animate two face images using CSS3. They are horizontally aligned, and should move towards each other. My current jsfiddle is not working for some reason.

What’s wrong with it?

<div id="screen">
    <div id="animation-01">
        <div class="face_turn_around">
            <img id="imgR" src="http://www.centerwow.com/stackoverflow/face/face_right.png"
            />
            <img id="imgL" src="http://www.centerwow.com/stackoverflow/face/face_left.png"
            />
        </div> <!-- END face_turn_around -->
    </div> <!-- END animation-01-->
</div> <!-- end TSCREEN -->

​ #screen {
    background: blue;
    border:1px solid #eee;
    height:300px;
    width:200px;
    top:15px;
    left:15px;
    margin:0;
    overflow:hidden;
    padding:0;
    position:relative;
}
#imgL {
    position:absolute;
    margin-left:25px;
    margin-top:25px;
    width:30px;
}
#imgR {
    position:absolute;
    margin-right:25px;
    margin-top:25px;
    width:30px;
}
@-webkit-keyframes face_turn_left {
    from {
        -webkit-transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(50px, 0px);
    }
}
@-webkit-keyframes face_turn_right {
    from {
        -webkit-transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(50px, 100px);
    }
}
#animation-01 {
    position:relative;
    -webkit-animation-name:face_turn_left;
    -webkit-animation-name:face_turn_right;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-unction:function:linear;
    -webkit-animation-delay:1s;
}

Answer 1

1. position:absoulte in #imgL and #imgR should be position:absolute;
2. #animation-01 needs position:relative;. Otherwise, the faces would be positioned absolutely relative to #screen.

Updated fiddle (I changed delay to 1s so that you don’t have to wait): http://jsfiddle.net/hfuGx/7/

When you want to have a separate animation for the two images, you need to attach the animation to the <img> elements, not on the parent. You can use two animations, or use one animation, where only 100% (aka to) is set.

@-webkit-keyframes face_turn {
    to {left:50px;}
}

Currently, when your animation ends, the element goes back to its original state. If you want to maintain the last state, use the animation-fill-mode property:

#imgL, #imgR {
    -webkit-animation-name: face_turn;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards; /* <-- This*/
}

Fiddle: http://jsfiddle.net/hfuGx/14/