幅を右から左に縮小する方法はありますか？

1画像をコンテナ（位置：固定）の幅を100％から0％にアニメーション化して消滅させようとしていますが、右から開始します。左から開始します。ページの向きを変更したり、divの右側を設定するなど、多くのことを試しました。左の代わりに：0px。 - それは動作しませんでした。どうすればいいですか？幅を右から左に縮小する方法はありますか？

2 - 私は幅が縮小していると私はそれを達成するために

border-bottom-right-radius: 500px; 
border-top-right-radius: 500px;

を使用しますが、アニメーションの最後には、円形の形状を取ることはありませんがdiv要素は円の形状を持つようにしたいです。サークルを維持するための良いアプローチは何ですか？

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-right-radius: 500px; 
 
    border-top-right-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

https://jsfiddle.net/kalidzakaria/xzs1r9qp/

出典

2017-09-29 Khaled Zakaria

こんにちは、スタックオーバーフローを歓迎！私はあなたのフィドルを「スニペット」に変換しました（質問エディタの '<>'ボタン、あなたはそれを見るために質問を編集できます）。回答者はあなたのコードを1か所で見ることができ、答えにコピーできます。 – msanford

あなたは余裕と私はあなたがしたいと思う効果を得るために幅をアニメーション化する必要があります。

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    margin-left: 0%; 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    margin-left: 100%; 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

出典

2017-09-29 13:45:51 epascarello

leftプロパティをアニメーション：

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    left: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    left: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

出典

2017-09-29 13:51:14 LinkinTED

私はここで何を達成したいのか分からなかった。アニメーションを見てから、同じことが何かを示唆しますが、左から開始してください。 –

は常に左上隅から始まる座標。

キーフレームを使用して、画像の座標を右に移動させることができます。その速度は、幅が小さくなるのと同じ速度です。あなたは既にのborder-bottom-右半径& のborder-top-右半径を使用して円の効果を適用

、私は '左' と '右' に変更します。

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";"move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 
@keyframes move3 { 
 
    0% { 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    left: 0%; 
 
    } 
 
    100% { 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    left: 100%; 
 
    } 
 
} 
 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

出典

2017-09-29 13:53:28

幅を右から左に縮小する方法はありますか？

答えて

関連する問題