CSS Animation をやってみた（1）

key以下の動画をみながらCSS Animationをやってみました！
www.youtube.com

その振り返りを書いていこうと思います
アニメーションで使用する画像やHTML, CSSはgitから

画像を用意する

HTMLは最初こんな感じ

<main id="slider">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="hoge"></div>
</main>

CSSを１つづつ説明していく

#slider {
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 250px);
    width : 500px;
    height: 300px;
}

position: absolute
要素がどのように配置されるかをabsolute（絶対位置指定要素）で設定、topとleftでslider要素の位置を指定

.image {
    position: absolute;
    top: 0;
    left: 0;
    width : 0;
    height: 100%;
    overflow: hidden;
}

width : 0;
overflow: hidden;
このようにcssを書くことで画像を隠すことができる
もしwidth : 0; だけにして、overflow: hidden; を削除すると画像が出てきてしまう

なぜかというと
親要素の#sliderの大きさが幅：500px, 高さ：300pxで、子要素の.imageの大きさが幅：0%, 高さ：300pxの場合
親要素から子要素がはみ出てしまっている
f:id:eeko-amaryllis:20200219112524j:plain:w500

このはみ出た画像を隠すのに overflow: hidden; が必要となってくる

overflow: hidden; は親要素の大きさで子要素を切り取って表示しれくれる
実際に確認してみると、たとえば親要素のサイズを変えて画像を見てみると

#slider {
    position: absolute; 
    top: calc(50% - 150px);
    left: calc(50% - 250px);
    width : 200px; /*親要素のサイズを変える*/
    height: 100px;
    background: #faa;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    width : 100%; /*幅を100%にして確認できるようにする*/
    height: 100%;
    overflow: hidden; 
}

以下のように点線のところのみが表示される（隠れているところは半透明にした）
f:id:eeko-amaryllis:20200219111613j:plain:w500

なので width : 0%; にしたとき、overflow: hidden; は必須

.image:after { 
    content: "";
    display: block; 
    width : 500px;
    height: 300px;
    background-size: cover;
    background-position: cover;
}

.image:after {
選択した要素の最後の子要素として擬似要素を作成し
よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられるらしい

display: block;
要素のblock形式で表示し、要素は縦に並ぶ
position: absolute; を使ったときは display: block; をつけるとズレがなくなったりいい感じになるらしい

background-size: cover;
background-position: cover;
画像のサイズと位置を
縦横比を崩さずに画像ができるだけ大きくなるよう拡大縮小する
画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取る

.image:nth-child(1):after {background-image: url(./images/1.png);}
.image:nth-child(2):after {background-image: url(./images/2.png);}
.image:nth-child(3):after {background-image: url(./images/3.png);}
.image:nth-child(4):after {background-image: url(./images/4.png);}

.image:nth-child(1)
兄弟要素のグループの中での位置をさしており、(1)なら1番目の要素をさしている

after {background-image: url(./images/1.png);}

1番目の要素の擬似要素を作成し、背景に画像を追加している

keyframesを書いていく

keyframesとはアニメーションの流れを記述するところ

@keyframes show-image {
    from { width: 0%}
    to { width: 100%}
}

@keyframes show-image
show-imageはアニメーションの名前
開始時のアニメーションはfromに書き、終了をtoに書く
これで何もない画面に左から右に画像が表示されるアニメーションの流れができた

animationを書いていく

.image:nth-child(1) { animation: show-image 0.7s ease 0.5s forwards;}
.image:nth-child(2) { animation: show-image 0.7s ease 0.7s forwards;}
.image:nth-child(3) { animation: show-image 0.7s ease 0.9s forwards;}
.image:nth-child(4) { animation: show-image 0.7s ease 1.1s forwards;}

1番目の要素の画像対して以下のようなアニメーションを設定する

画像の開始から終了までの時間を0.7sとし
アニメーションの強弱をeaseに設定
アニメーションの開始時間を0.5sからにし
アニメーションの開始前・終了後のスタイルをforwardsに設定 forwardsは再生後、要素のスタイルは最後のキーフレームの状態のままになり、これがないと画像が消えてしまう

animationの記述例

セレクタ名 {
    animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}

これで4枚の画像が左から右にスライドして表示されるようになった！
さらに上から4本の長方形が出てくるアニメーションは次の記事で

Hello, World!!

むずかしいことはかけません

CSS Animation をやってみた（1）

画像を用意する

keyframesを書いていく

animationを書いていく

animationの記述例