びよんとバーが伸びて、消えていくのに合わせてテキストが現われるアレ。
使う機会がないけれど、どこかで使ってみたいのでテストがてらメモしておきます。
以下サンプル。（’Rerun’でアニメーション再スタート）
See the Pen カーテンanimation by uta (@utamaro) on CodePen.
サンプルのコード説明
HTML
htmlの記述はこれだけ。ポイントはcurtainクラスをつけた要素の中に、テキストが入った要素を入れ子にする点。
<p class="curtain"><span>SAMPLE CODE SAMPLE CODE</span></p> CSS
アニメーション部分の動きはcssで制御します。
それぞれの記述説明はコメントアウトに。使用する際に消してください。
.curtain {
position: relative;
display:inline-block;
font-size: 30px;
}
/* span要素 最初は非表示 */
.curtain span {
transition: all 0s 1s ease;
opacity: 0;
padding: 0 0.2em;
}
/* .curtainに.activeがついたらspanを表示（1s後に0sかけて透明度を0→1に） */
.curtain.active span {
opacity: 1;
color:#333;
}
/* .curtainに擬似要素(カーテン部分)を追加して、transformで横幅を0にしておく scaleX(0) */
.curtain:after {
display: inline;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scaleX(0);
background: #333;
}
/* .curtainに.activeがついたら擬似要素のアニメーションを開始させる */
/* アニメーション名,アニメーション完了までの所要時間,変化の度合い,遅延時間,回数,再生方向,アニメーション前後のスタイル,アニメーションの再生・停止 */
.curtain.active:after {
animation: curtainEffect 1s ease-in-out 0.5s 1 normal both running;
}
@keyframes curtainEffect {
0% {
transform-origin: left center;
transform: scaleX(0);
}
49.999% {
transform-origin: left center;
transform: scaleX(1);
}
50% {
transform-origin: right center;
transform: scaleX(1);
}
100% {
transform-origin: right center;
transform: scaleX(0);
}
}
/*
* transform-originで変形における原点を設定（最初は左端・天地中央にセット）
* そのままscaleX(1)で右側いっぱいまで要素を伸ばし、
* 伸ばした状態で原点を右・上下中央にセットし直す。
* 原点が右に変わったことでscaleX(0)に戻る際、右側に消えるように流れる
*/
動きとしては、.curtainに疑似要素を追加してそれをカーテン部分とします。
span部分は最初は透明にしておき、カーテンが開ききったタイミングで表示。
カーテンが再度開くのに合わせて、下に表示させておいたspan要素が現われる、という流れです。
javascript
.curtain要素に.activeをつけることで、アニメーション開始の合図とします。
全てのhtmlが読み込まれたタイミングで実行させます。
<script>
window.onload = function() {
var curtainElements = document.getElementsByClassName('curtain');
[].forEach.call(curtainElements, function(elem) {
elem.classList.add('active');
})
};
</script> htmlに直接記述する用に<script>タグをつけています。</body>直前あたりに記述してください。