html - 如何使用 CSS3 将两张图片相互移动？

Question

我正在使用 CSS3 为两个面部图像设置动画。它们水平对齐，并且应该相互靠近。我当前的 jsfiddle由于某种原因无法正常工作。

它出什么问题了？

<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在#imgL并且#imgR应该是position:absolute;
2. #animation-01需要position:relative;。否则，面将绝对相对于 定位#screen。

更新了小提琴（我将延迟更改为 1 秒，这样您就不必等待）：http: //jsfiddle.net/hfuGx/7/

当您想为两个图像制作单独的动画时，您需要将动画附加到<img>元素上，而不是父级上。您可以使用两个动画，或使用一个动画，其中仅设置100%(aka to)。

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

目前，当您的动画结束时，元素会恢复到其原始状态。如果要保持最后一个状态，请使用以下animation-fill-mode属性：

#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*/
}

小提琴：http: //jsfiddle.net/hfuGx/14/