0

だから私はdivを持っているとしましょう.width: 7vh; height: 7vh; background: black;それは別のdivの中にありbackground: orange; height: 7vh; width: 100%;ます. アニメーションを持っていますが、それは中心を外すことになっています。現在、私はleft: 50%内側の div で使用していますが、明らかにセンタリングに近いですが、実際にはそうではありません。margin: 0 auto;またはmargin-left: auto; margin-right: auto;アニメーション化しないでください。それで、私は何をしますか？私の唯一の解決策はJSで距離を計算することですか?

JsFiddle http://jsfiddle.net/8e7dk/

この例はそれを中心に置いていません。left: 50%;

4

1 に答える 1

1

アニメーションの開始時に正方形を中央にmargin-left:-3.5vh;配置し、キーフレーム アニメーションで 0 にアニメーション化できます。

デモ

CSS :

#outer{
    background: orange;
    height: 7vh;
    width: 100%;
}
#logo{
    height: 7vh;
    position: absolute;
    left: 50%;
    margin-left:-3.5vh;
    width: 7vh;
    -webkit-animation: moveLeft 1s forwards ease-in-out;
    -moz-animation: moveLeft 1s forwards ease-in-out;
    -ms-animation: moveLeft 1s forwards ease-in-out;
    -o-animation: moveLeft 1s forwards ease-in-out;
    animation: moveLeft 1s forwards ease-in-out;
    background: black;
}

@-webkit-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@-o-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@-moz-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
于 2014-06-29T11:26:59.560 に答える