最低限おぼえておきたい動き
-シャッ（CSS）-
See the Pen 4-9 最低限覚えておきたい現れ方 - シャッ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
動きを実現する仕組み
CSS アニメーションで実現する背景色が伸びて出現する方法です。
① 全体のボックス（bgextend）を出現させる
② ボックスの疑似要素（::before）に背景色が伸びる指定（bgLRextend ※動きごとにHTML,CSSのクラス名を変更）を行う
③ 内側のボックス（bgappear）を遅らせて出現
このサンプルは、画面を開いたらすぐに動きます。
スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。
HTMLの書き方
<div class="bgextend bgLRextend"><span class="bgappear">背景色が伸びて出現<br>（左から）</span></div>
<div class="bgextend bgRLextend"><span class="bgappear">背景色が伸びて出現<br>（右から）</span></div>
<div class="bgextend bgDUextend"><span class="bgappear">背景色が伸びて出現<br>（下から）</span></div>
<div class="bgextend bgUDextend"><span class="bgappear">背景色が伸びて出現<br>（上から）</span></div>自作のCSS内の書き方
/*========= レイアウトのためのCSS ===============*/
.bgextend{
width: 220px;
padding: 20px;
margin:0 20px 20px 0;
box-sizing:border-box;
}
/*========= 背景色の動きのCSS ===============*/
/*背景色が伸びて出現 共通*/
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/* はみ出た色要素を隠す */
opacity:0;
}
@keyframes bgextendAnimeBase{
from {
opacity:0;
}
to {
opacity:1;
}
}
/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------- 左から --------*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}
/*--------- 右から --------*/
.bgRLextend::before{
animation-name:bgRLextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
0% {
transform-origin:right;
transform:scaleX(0);
}
50% {
transform-origin:right;
transform:scaleX(1);
}
50.001% {
transform-origin:left;
}
100% {
transform-origin:left;
transform:scaleX(0);
}
}
/*--------- 下から --------*/
.bgDUextend::before{
animation-name:bgDUextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
0% {
transform-origin:bottom;
transform:scaleY(0);
}
50% {
transform-origin:bottom;
transform:scaleY(1);
}
50.001% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}
/*--------- 上から --------*/
.bgUDextend::before{
animation-name:bgUDextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
0% {
transform-origin:top;
transform:scaleY(0);
}
50% {
transform-origin:top;
transform:scaleY(1);
}
50.001% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(0);
}
}
■CSSの transform、opacity 、transitionの組み合わせに注意！
要素にopacity（透過）を指定し、さらにtransformやtransitionを組み合わせて変形させると、
要素の一部が消えたり意図しない挙動になることがあります。
その際は、親要素や対象の要素にbackface-visibility(三次元になった際に裏面を可視化するかどうか)
を指定すると多くの場合解決します。
＜解決方法＞
●●（要素 orクラス/ ID名）{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください！
