CSSのテキストが表示されます

Question

ページが読み込まれているときにそのテキストが表示されます（例：here）。

これを行う方法？いくつかの研究の後、私はこれを持っている（しかし、それは動作しません）：

#text p { 
 
    font-size: 21px; 
 
    text-align: center; 
 
    animation: appear 2s; 
 
    -moz-animation: appear 2s; 
 
    /* Firefox */ 
 
    -webkit-animation: appear 2s; 
 
    /* Safari and Chrome */ 
 
    -o-animation: appear 2s; 
 
    /* Opera */ 
 
} 
 
@keyframes appear { 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-moz-keyframes appear { 
 
    /* Firefox */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-webkit-keyframes appear { 
 
    /* Safari and Chrome */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-o-keyframes appear { 
 
    /* Opera */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
}

<div id="text"> 
 
    <p>Test for the Text</p> 
 
</div>

私が間違って何をやっているし、どのようにそれを修正するには？あなたはほぼありました

Answer 1

、あなたは絶対にleftプロパティをアニメーション化するために、あなたのpを配置する必要があり、私もそれinline-blockてきたので、テキストは、あなたは、あなたが整列センターとしてpタグを持っていそうと（画面をオフに開始しますそれは `の#text p`ため` position`財産としなければならないかもしれ

#text p { 
 
    display: inline-block; 
 
    font-size: 21px; 
 
    text-align: center; 
 
    position: absolute; 
 
    animation: appear 2s; 
 
    left: 315px; 
 
} 
 
@keyframes appear { 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-moz-keyframes appear { 
 
    /* Firefox */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-webkit-keyframes appear { 
 
    /* Safari and Chrome */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
} 
 
@-o-keyframes appear { 
 
    /* Opera */ 
 
    from { 
 
    left: -100px; 
 
    } 
 
    to { 
 
    left: 315px; 
 
    } 
 
}

<div id="text"> 
 
    <p>Test for the Text</p> 
 
</div>