苔生す砂箱的な何か

[フレーム]

[フレーム]

[フレーム]

[フレーム]

[フレーム]

[フレーム]

サイトマネージャ

すべてのページ

サイトメンバー一覧

サイド | トップ | テーマ

STANDALONE BUTTONS

[[>]]
[[module Rate]]
[[/>]]
**アイテム番号:** SCP-XXXX-JP
**オブジェクトクラス:** Euclid
[[div class="pbox"]]
[[span class="be"]]**特別収容プロトコル:** SCP-XXXX-JPはあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。[[/span]][[span class="af"]]**特別収容プロトコル:** メタタイトルはいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい。[[/span]]
[[/div]]
[[div class="pbox"]]
[[span class="be"]]**説明:** 段落総入れ替えをしているのでまったく違う文章を出現させることもできますが、__下を見るとやけに間隔が空いているように見えますね?__[[/span]][[span class="af"]]**説明:** 変化前と変化後の文字数(文章の長さ)を可能な限り揃えないと、このように妙な場所に改行が入る、あるいは文章が重なるなどの症状を引き起こしてしまいます。ああああああああああああああああああああああああああああああああああああああああああああああ。ああああああああああああああああああああああああああああああああああああああああああああああ。[[/span]]
[[/div]]
あああああ
**補遺1:** 引用符内で文章を入れ替えることはできません。それでも引用符内の文章を入れ替えたい場合は、後述の「疑似引用符構文」を使用してください。
**補遺2:** 疑似引用符構文サンプル
[[div class="block"]]
[[div class="pbox"]]
[[span class="be"]]さしすせそ[[/span]][[span class="af"]]たちつてと[[/span]]
なにぬねの
はひふへほ
[[/div]]
[[/div]]

[[module CSS]]
/*
animation-durationは、アニメーションの始点から終点までにかかる時間です
animation-delayは、ページ読み込みからアニメーションが始まるまでの時間です
*/
/*ここから下が文章を消失・出現させる部分です。*/
.pbox {
 position: relative;
 width: 100%;
}
.block {
 border: 1px dashed #999;
 padding: 0 1em;
 background-color: #f4f4f4;
 display: block;
 -webkit-margin-before: 1em;
 -webkit-margin-after: 1em;
 -webkit-margin-start: 40px;
 -webkit-margin-end: 40px;
}
.be {
 position: absolute;
 width: 100%;
 white-space: pre-wrap;
 animation-name: v;
 animation-duration: 3s;
 animation-delay: 10s; 
 animation-fill-mode: forwards;
 /*消失する文字列*/
}
.af {
 top: -0.8em;
 animation-name: g;
 animation-duration: 3s;
 animation-delay: 10s; /*ここ*/
 animation-fill-mode: forwards;
 opacity: 0;
 /*出現する文字列*/
}
/*
ここから下がアニメーション(消失・出現)を規定する部分です。
弄る必要はおそらくありません。
*/
@keyframes v {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
@keyframes g {
 0% {
 opacity: 0;
 }
 100% {
 opacity: 1;
 }
}
@keyframes g-ex {
 0% {
 opacity: 0;
 height: 0px;
 }
 100% {
 opacity: 1;
 height: 318px;
 }
}
[[/module]]