0

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;
}
4

1 に答える 1

1
  1. position:absoulteである必要が#imgLあり#imgRますposition:absolute;
  2. #animation-01ニーズposition:relative;。そうしないと、面が に対して絶対的に配置され#screenます。

更新されたフィドル (待つ必要がないように遅延を 1 秒に変更しました): http://jsfiddle.net/hfuGx/7/

<img>2 つの画像に個別のアニメーションを使用する場合は、アニメーションを親要素ではなく要素にアタッチする必要があります。2 つのアニメーションを使用することも、100%(aka to) のみが設定されている 1 つのアニメーションを使用することもできます。

@-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/

于 2012-07-02T10:00:04.860 に答える