1

簡単なアニメーションのタスクがあります。キーフレームを適用してアニメーションを定義し、セレクターを使用して適用する必要がある要素にこのキーフレームの参照を提供しました。

アニメーションは機能していますが、私が提供したタイミング機能を利用していません。代わりに、デフォルトの「容易さ」を使用します。

div {
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
    width:100px;
    color:white;
    font-weight:bold;
    /*-webkit-transition-timing-function: cubic-bezier(0.5, 1, 0.25, 1);*/
    -webkit-transition-timing-function: linear;
}
.div1, .div2 {
    -webkit-animation:AA_Anim 1.5s;
    position:relative;
}

@-webkit-keyframes AA_Anim {
    from {
        left:300px;
    }
    to {
        left:0px;
    }
}

サンプル - JSFddle

4

1 に答える 1