QA@IT

animation-duretionスタイルについて

2538 PV

下記のソースコードは、画面中央にいる人(〇)が「こんにちは」という言葉を発しているところを
"marquee"タグではなくてanimation-duretionスタイルで試みたものです。
しかし、中央にいる人(〇)までが、一緒に言葉と共に(左に)移動してしまいます。
どうすれば、発する人と言葉を分離できるでしょうか。ご教示ください。

<style>

p.myMarquee {
    display:inline-block;    
    width: 100%;
    text-align: right;
    white-space: nowrap;

    animation-duration: 5s;
    animation-name: mq;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-animation-duration: 5s;
    -webkit-animation-name: mq;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

@-webkit-keyframes mq {
    0% {
        margin-left: -50%;
        }
    100% {
        margin-left: -90%;
        }
    }

@keyframes mq {
    0% {
        margin-left: -50%;
        }
    100% {
        margin-left: -90%;
        }
    }

</style>

<div>
<p class="myMarquee">こんにちは</p>
<p style="text-align:center; display:inline-block;">○</p></div>


回答

貼り付けるだけで確認できました。助かります。

インラインブロック要素同士なので、横方向に積み上げているイメージになります。
divと二つのpに border: 1px black solid; というスタイルを足すとわかりやすいかもしれません。

正しい解決策かは自信はありませんが今回のこのサンプルで言えば、

  1. 二つのpからdisplay指定を外す(消す)
  2. p.myMarqueeに position: absolute; を加える とすることで、一応は実現できると思います。

ただposition:absoluteは(position:static以外の)親要素から見た絶対位置指定(ほかの要素に関係なくleft,rightを適用できる)なので、今回で言えばdiv内にほかの要素が増えてきた場合、位置を調整する必要があります。
そのあたりに注意が必要です。

たとえば、

<div>
  <p class="myMarquee">こんにちは</p>
  <span>abcd</span>
  <p style="text-align:center;">○</p></div>
</div>

となったときに「○」の方はspanの分ずれますが、「こんにちは」はあくまで親要素(今回はdiv)からの位置算出となるのでずれません。
結果、「○」と「こんにちは」は別の高さになってしまうということです。

編集 履歴 (0)
  • 返事遅れました。詳しく説明していただきまして、感謝しています。
    うまくいきました。これを、活用させていただきます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。