【css】下から上に背景の色が動くアニメーション方法

最近アニメーションを使ったリッチなサイトが増えています。

今回はkeyframesを使って下から上に背景の色が動くアニメーションを表現したいと思います。

animationプロパティとkeyframesを使う

アニメーションはanimationプロパティと@keyframesを使うことでさまざまなアニメーションを作ることができます。

@keyframesはアニメーションが始まってから終わるまでどのようなアニメーションをするのか指定することができます。

たとえばアニメーションで位置を変えたりサイズを変えたりすることができます。

html

.bg p{
	position: relative;
	width: 100%;
	height: 300px;
}

css

.bg p:after{
    content: '';
    width: 100%;
    height: 500px;
    background: #A4C6FF;
    position: absolute;
    left: 0;
    bottom: 0;
    animation-name: bganime;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes bganime {
   0%  { height: 0;}
  50%  { height: 250px;}
  100% { height: 500px;}
}

サンプル