CSS3 を使用して 2 つの顔画像をアニメーション化しようとしています。それらは水平方向に整列しており、互いに向かって移動する必要があります。現在の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;
}