範囲外から落下してくるCSSアニメーションサンプル
ブラウザの表示領域の上部・範囲外・画面外から指定した要素が落下してくるCSSアニメーションのサンプルコードです。
昔のWEBサイトでマリオやクモが落下してくるWEBサイトやブログがありましたが、そんなイメージです。
上から落下してくるCSSアニメーションサンプル
サンプルでは「item_container」という親要素内にて「item」という四角形が落下してきます。
See the Pen CSS Zoom in and out with mouse hover by yochans (@yochans) on CodePen.
サンプル表示のため、親要素にしている「container」を「position: relative;」にて基準となる位置に指定しています。
サイト全体・ブラウザの表示領域上から落下してくるようにするには、親要素の「position: relative;」のはなくして、「position: absolute;」の基準とする位置をデフォルトの「body」（HTML?）のままにしておきます。
<div class="container">
<div class="item"></div>
</div>.container {
position: relative;
margin: 0;
height: 220px;
background: #000;
overflow: hidden;
}
.item {
position: absolute;
top: 0;
left: 50px;
width: 50px;
height: 50px;
background: #0091EA;
animation: come-down-anim 2s linear infinite;
z-index: 5;
}
@keyframes come-down-anim {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(300px);
}
}落下地点の調節
基準にする親要素やサイト全体での高さに合わせてキーフレームの100％時の「transform: translateY()」の値を変更します。
きっちりサイトの高さを指定したい場合は、JavaScriptを利用することで簡単に実装可能だと思います。
100% {
transform: translateY(300px);
}要素が他の要素に隠れてしまう場合
落下させる要素が他の要素より背面に表示され隠れてしまう場合は「z-index」で深度を調節することで全面に表示することが可能です。
これはWEBサイト上で他の要素に設定されている深度が影響しますので、最前面にする場合はより大きな数値を指定します。
z-index: 2;無限ループを解除する
無限を解除する場合は「animation」から「infinite」を外します。
animation: come-down-anim 2s linear;落下速度を調節する
落下距離が長くなれば、同じアニメーション時間の場合は相対的に落下速度も早くなります。
落下速度を調節する場合は「animation」に指定しているアニメーション時間を指定します。
animation: come-down-anim 5s linear infinite;