QA@IT
«質問へ戻る

質問を投稿

animation-duretionスタイルについて

下記のソースコードは、画面中央にいる人(〇)が「こんにちは」という言葉を発しているところを
"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>


下記のソースコードは、画面中央にいる人(〇)が「こんにちは」という言葉を発しているところを
"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>


```