css animation で、ブロック要素を左端から右端へ移動してそのまま表示するには？

Question

css アニメーション機能を使い、ブロック要素を画面の左端から右端に移動させ、そのまま表示させたいのですが、どのように記述したらいいでしょうか？

@keyframes moveImage_c1 {
    0% {left: 0px}
    100% {right: 0px}
}

@keyframes moveImage_c1 {
    0% {left: 0px}
    100% {left: auto; right: 0px}
}

などと書いてみましたが、うまく動きません。
windowサイズが一定ではないので、left で固定px の記述ができません。

移動させたいブロック要素は、

position: absolute;
width: 100px;
height: 100px;

です。

@keyframes moveImage_c1 {
    0% {left: 0px}
    100% {left: 90%}
}

と書くと、移動はするのですが、ぴったり右端にくっつきません。

どのように記述するのが正解でしょうか。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを質問文に追記されたほうが回答を得やすいと思います。

Answer 1

「windowサイズが一定ではない」とのこと、「移動させたいブロック要素」は一定サイズと読みました。

@keyframes moveImage_c1 {
    0% {left: 0%}
    100% {left: calc( 100% - 100px )}
}

calc() - CSS: カスケーディングスタイルシート | MDN

条件に相違があればお知らせください。

コメントを受けて追記

手元のIE11で動作することを確認しました。

div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: gray;
  animation: moveImage_c1 1s;
  right: 0px;
}

@keyframes moveImage_c1 {
  0% {
    left: 0%;
    transform: translateX(0%);
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

<div></div>

コメントを受けて追記②

では、animation-fill-mode: forwards;で。
IE11で確認しました。

div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: gray;
  left:-100px;
  animation: moveImage_c1 1s forwards;
}

@keyframes moveImage_c1 {
  0% {
    left: 0%;
    transform: translateX(0%);
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

コメントを受けて追記③

IE11のbody要素が広がってしまう現象は、overflow: hidden;で対処できそうです。
（width:100%;もあった方がいいかも？）

body {
  overflow: hidden;
}

div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: gray;
  animation: moveImage_c1 1s forwards;
}

@keyframes moveImage_c1 {
  0% {
    left: 0%;
    transform: translateX(0%);
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

Comments

[tfline_w]

ありがとうございます。試してみました。
Chrome だと、問題なく動作しましたが、IE11 だと動作しません(animation自体が実行されません)でした。もう少し調査してみます。

[tfline_w]

IE11でもcalc() は有効ということで、別の<div> にstyle="left: calc(100% - 100px)" と指定したところ、正常に配置されました。@keyframes に指定した場合のみ、うまくいかないということかもしれません。

[Lhankor_Mhy]

IE11 は calc のバグが色々あるので……
https://caniuse.com/#search=calc

[Lhankor_Mhy]

やはりバグのようですね。

IEとEdgeでCSSアニメーションにcalc()を使用すると動かないバグ │ Webty Staff Blog
http://webty.jp/staffblog/production/post-213/

[Lhankor_Mhy]

追記しました。translateX を併用して、ボックスサイズを吸収しています。

[kei344]

多分別のバグなのですが、IE11でcalcを使う場合「(」「)」の前後に空白があると無視されたことがあります。

[Lhankor_Mhy]

おお、そうなのですね。
たしかにそのスペースは不要でした。
仕様はどうなっているのだろう……？

[tfline_w]

ありがとうございます。
left: 100% で移動して、その後、translateX(-100%) だと、右端に100px分の余白が生まれてしまいました。

[Lhankor_Mhy]

そうはならないと思うのですが……
環境の問題でしょうか？
https://jsfiddle.net/Lhankor_Mhy/fxd2ka0r/

[Lhankor_Mhy]

IE11、Chrome73、Firefox66 で動作確認しましたが、「右端に100px分の余白が生まれてしまいました」という問題は確認できませんでした。

問題が再現するコードをご提示いただいた方が早いかもしれません。

[tfline_w]

すいません。こちらのコードだと、画面の外（左側）からボックスが移動してくる、という動作にするために、style="left: -100px" が入っていました。これを外したところ、右端の余白は生まれなくなりました。
left: -100px を入れると、余白が生まれてしまいます。これも、chromeでは生まれないのですが。

[Lhankor_Mhy]

追記しました。
animation-fill-mode: forwards;
とすれば、終了時のスタイルが適用されます。

https://jsfiddle.net/Lhankor_Mhy/fxd2ka0r/1/

[tfline_w]

たびたびありがとうございます。
説明が悪かったかもしれません。IE11の余白というのは、パッと見にはわからないのですが、横スクロールバーが発生しています。最後に修正していただいたコードでも、横スクロールバーが出ます。

[Lhankor_Mhy]

body {
width: 100%;
overflow: hidden;
}
で対処できそうです。

https://jsfiddle.net/Lhankor_Mhy/fxd2ka0r/13/

[tfline_w]

ありがとうございます！
まさに今、同じ結論に達したところでした。

keyframes の開始が、left: 0%; だと、いきなり出現してしまうので、
0% {
left: -100px;
transform: translateX(0%);
}
と修正し、狙い通りの動きが実現できました。
長々と助けていただき、ありがとうございました。

#IE 滅びてほしい

[Lhankor_Mhy]

ご解決されて何よりです。

> #IE 滅びてほしい

全くです。
幸いなことにEdgeは滅びましたので、時間の問題ですよね。