<div class=”wrapper”>

<p>アニメーション1回分の時間の長さを指定したい</p>
<div class=”flex”>
<div class=”change-time05 box fadeUp”>0.5秒かけて変化</div>
<div class=”change-time1 box fadeUp”>1秒かけて変化</div>
<div class=”change-time15 box fadeUp”>1.5秒かけて変化</div>
</div>

<p>アニメーションの開始を遅らせたい</p>
<div class=”flex”>
<div class=”delay-time05 box fadeUp”>0.5秒後にアニメーション開始</div>
<div class=”delay-time1 box fadeUp”>1秒後にアニメーション開始</div>
<div class=”delay-time15 box fadeUp”>1.5秒後にアニメーション開始</div>
</div>

<p>動きをループさせたい</p>
<div class=”flex”>
<div class=”count2 box fadeUp”>動きを2回繰り返す</div>
<div class=”countinfinite box fadeUp”>動きを無限に繰り返す</div>
</div>

<p>アニメーションの進行具合を操作したい</p>
<div class=”flex”>
<div class=”timing-ease box fadeUp”>開始時と終了時が緩やかに変化（ease）</div>
<div class=”timing-ease-in box fadeUp”>開始時は緩やかに変化、終了に近づくと早く変化（ease-in）</div>
<div class=”timing-ease-out box fadeUp”>開始時は早く変化し、終了時は緩やかに変化（ease-out）</div>
<div class=”timing-ease-in-out box fadeUp”>開始時と終了時は、かなり緩やかに変化（ease-in-out）</div>
<div class=”timing-linear box fadeUp”>開始から終了まで一定に変化（linear）</div>
<div class=”timing-steps box fadeUp”>パラパラ漫画のように数値をコマ数で変化（steps）</div>
<div class=”timing-cubic-bezier box fadeUp”>変化の進行割合を3次ベジェ曲線で指定（cubic-bezier）</div>
</div>

<p>アニメーションをまとめて設定するデモ</p>
<div class=”box fadeDown”>アニメーションをまとめて設定するデモ</div>

</div>

@charset “utf-8”;

.fadeUp {
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* アニメーション１回分の時間の長さを指定するCSS*/

.change-time05{
animation-duration: 0.5s;
}

.change-time1{
animation-duration: 1s;
}

.change-time15{
animation-duration: 1.5s;
}

.change-time2{
animation-duration: 2s;
}

.change-time25{
animation-duration: 2.5s;
}

/* 動きをループさせるCSS*/

.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{
animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションの開始を遅らせるCSS*/

.delay-time05{
animation-delay: 0.5s;
}

.delay-time1{
animation-delay: 1s;
}

.delay-time15{
animation-delay: 1.5s;
}

.delay-time2{
animation-delay: 2s;
}

.delay-time25{
animation-delay: 2.5s;
}

/* アニメーションの進行具合を操作するCSS*/

.timing-ease{
animation-timing-function:ease;
}

.timing-ease-in{
animation-timing-function:ease-in;
}

.timing-ease-out{
animation-timing-function:ease-out;
}

.timing-ease-in-out{
animation-timing-function:ease-in-out;
}

.timing-linear{
animation-timing-function:linear;
}

.timing-steps{
animation-timing-function:steps(4, end);
}

.timing-cubic-bezier{
animation-timing-function:cubic-bezier(.17,.67,.67,.51);
}

/*==アニメーションをまとめて設定する==*/

.fadeDown{
animation: fadeDownAnime 1s ease 1.5s forwards;/*アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/*========= レイアウトのためのCSS ===============*/

.wrapper{
overflow: hidden;
}

.flex{
display:flex;
flex-wrap: wrap;
}

.box{
width: 220px;
padding: 20px;
margin:0 20px 20px 0;
background: #666;
color: #fff;
box-sizing:border-box;
}

今回はナシ