• このエントリーをはてなブックマークに追加

アニメーション:背景色の変化

赤色から黄色へ

背景色が赤色だったものが、徐々に黄色に変化していくアニメーションサンプル。

HTML

<div class="background-red-yellow">
あいうえお
</div>

CSS

.background-red-yellow {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-red-yellow 5s ease 1 normal;
color: rgba(255,255,255,1);
background: rgba(255,255,0,1);
}
@keyframes anime-background-red-yellow {
from {
background: rgba(255,0,0,1);
}
to {
background: rgba(255,255,0,1);
}
}

緑から青へ

背景色が緑だったものが、徐々に青に変化していくアニメーションサンプル。

HTML

<div class="background-green-blue">
緑から青へ<br>
※イマイチ
</div>

CSS

.background-green-blue {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-green-blue 5s ease 1 normal;
color: rgba(255,255,255,1);
background: rgba(0,80,255,1);
}
@keyframes anime-background-green-blue {
from {
background: rgba(20,120,0,1);
}
to {
background: rgba(0,80,255,1);
}
}

紫から青に変化を繰り返す

色変化を無限に繰り返すようにするサンプル。紫から青に変化する。ただし、青から紫に戻る時には、ぱっと戻ってしまう。

HTML

<div class="background-purple-blue-infinite">
繰り返し
</div>

CSS

.background-purple-blue-infinite {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-purple-blue-infinite 5s linear infinite;
color: rgba(255,255,255,1);
background: rgba(0,80,255,1);
}
@keyframes anime-background-purple-blue-infinite {
from {
background: rgba(150,0,150,1);
}
to {
background: rgba(0,80,255,1);
}
}

紫から青に変化を繰り返す

なめらかじゃない。ということで、紫から青になって今度また紫に徐々に変化していくようにする。

HTML

<div class="background-purple-blue-infinite-loop">
紫から青へ:繰り返し
</div>

CSS

.background-purple-blue-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-purple-blue-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(0,80,255,1);
}
@keyframes anime-background-purple-blue-infinite-loop {
0% {
background: rgba(150,0,150,1);
}
50% {
background: rgba(0,80,255,1);
}
100% {
background: rgba(150,0,150,1);
}
}

徐々に色がなめらかに繰り返す:基準4色を使ったレインボー

色を増やしてなめらかに色変化するようにしてみる。最後赤に戻ってくるときがミソ。

HTML

<div class="background-purple-blue-infinite-loop">
レインボー繰り返し1
</div>

CSS

.background-colorful-1-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-colorful-1-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(255,0,0,1);
}
@keyframes anime-background-colorful-1-infinite-loop {
0% {
background: rgba(255,0,0,1);
}
25% {
background: rgba(255,255,0,1);
}
50% {
background: rgba(0,255,0,1);
}
75% {
background: rgba(0,0,255,1);
}
100% {
background: rgba(255,0,0,1);
}
}

繰り返し色変化背景 混沌

赤は有彩色で、さらに黒・白を加えたもの。黒→赤→紫→白→黒

HTML

<div class="background-colorful-2-infinite-loop">
混沌
</div>

CSS

.background-colorful-2-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-colorful-2-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(255,0,0,1);
}
@keyframes anime-background-colorful-2-infinite-loop {
0% {
background: rgba(0,0,0,1);
}
25% {
background: rgba(255,0,0,1);
}
50% {
background: rgba(100,0,100,1);
}
75% {
background: rgba(255,255,255,1);
}
100% {
background: rgba(0,0,0,1);
}
}

繰り返し色変化背景 ビーチ

ビーチをイメージしたもの。明るいブルー系を中心に変化。

HTML

<div class="background-colorful-3-infinite-loop">
ビーチ
</div>

CSS

.background-colorful-3-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-colorful-3-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(30,150,255,1);
}
@keyframes anime-background-colorful-3-infinite-loop {
0% {
background: rgba(30,150,255,1);
}
33.33% {
background: rgba(0,180,200,1);
}
66.66% {
background: rgba(0,100,190,1);
}
100% {
background: rgba(30,150,255,1);
}
}

繰り返し色変化背景 深海

深海をイメージしたもの。濃い青を中心にした変化。

HTML

<div class="background-deepsea-infinite-loop">
深海
</div>

CSS

.background-deepsea-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-deepsea-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(0,20,90,1);
}
@keyframes anime-background-deepsea-infinite-loop {
0% {
background: rgba(0,20,90,1);
}
33.33% {
background: rgba(0,0,180,1);
}
66.66% {
background: rgba(0,10,120,1);
}
100% {
background: rgba(0,20,90,1);
}
}

繰り返し色変化背景 深緑

深海をイメージしたもの。濃い緑色の細かい変化。

HTML

<div class="background-deepforest-infinite-loop">
深緑
</div>

CSS

.background-deepforest-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-deepforest-infinite-loop 10s linear infinite;
color: rgba(255,255,255,1);
background: rgba(0,60,10,1);
}
@keyframes anime-background-deepforest-infinite-loop {
0% {
background: rgba(0,60,10,1);
}
25% {
background: rgba(0,90,40,1);
}
50% {
background: rgba(30,60,0,1);
}
75% {
background: rgba(0,90,40,1);
}
100% {
background: rgba(0,60,10,1);
}
}

繰り返し色変化背景 お花畑

花畑をイメージしたもの。明るい黄色から黄緑に変化。

HTML

<div class="background-flowergarden-infinite-loop">
お花畑
</div>

CSS

.background-flowergarden-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-background-flowergarden-infinite-loop 5s linear infinite;
color: rgba(0,0,0,1);
background: rgba(255,255,0,1);
}
@keyframes anime-background-flowergarden-infinite-loop {
0% {
background: rgba(255,255,0,1);
}
50% {
background: rgba(200,255,0,1);
}
100% {
background: rgba(255,255,0,1);
}
}

ボーダーにアニメーションを付ける

ボーダーにアニメーションを付けてみる。ボーダーもアニメーションを設定することができるので、やってみようかと思う。

ボーダーを変化させる

ボーダーの色を徐々に変化させる。

easeを使って変化の開始と終了部分の経過を少し変えてみる。

HTML

<div class="border-pink-red-infinite-loop">
ボーダー
</div>

CSS

.border-pink-red-infinite-loop {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-border-pink-red-infinite-loop 3s linear infinite;
color: rgba(0,0,0,1);
border: solid 22vw rgba(255,255,0,1);
}
@keyframes anime-border-pink-red-infinite-loop {
0% {
border: solid 2vw rgba(0,255,255,1);
}
33.33% {
border: solid 2vw rgba(255,255,0,1);
}
66.66% {
border: solid 2vw rgba(255,0,255,1);
}
100% {
border: solid 2vw rgba(0,255,255,1);
}
}

ボーダーを変化させる:ease

easeを使って変化の開始と終了部分の経過を少し変えてみる。

HTML

<div class="border-pink-red-infinite-loop-ease">
ボーダー
</div>

CSS

.border-pink-red-infinite-loop-ease {
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-border-pink-red-infinite-loop-ease 3s ease infinite;
color: rgba(0,0,0,1);
border: solid 22vw rgba(255,255,0,1);
}
@keyframes anime-border-pink-red-infinite-loop-ease {
0% {
border: solid 2vw rgba(0,255,255,1);
}
33.33% {
border: solid 2vw rgba(255,255,0,1);
}
66.66% {
border: solid 2vw rgba(255,0,255,1);
}
100% {
border: solid 2vw rgba(0,255,255,1);
}
}

角丸:border-radiusを変化させる

角丸をアニメーションで変化させてみる。

HTML

<div class="border-border-radius-1-infinite-loop">
border-radius
</div>

CSS

.border-border-radius-1-infinite-loop {
display: flex;
justify-content: center;
align-items: center;
width: 10vw;
height: 10vw;
padding: 2vw;
animation: anime-border-border-radius-1-infinite-loop 3s ease infinite;
color: rgba(255,255,255,1);
background: rgba(0,0,0,1);
}
@keyframes anime-border-border-radius-1-infinite-loop {
0% {
border-radius: 0;
}
50% {
border-radius: 100%;
}
100% {
border-radius: 0;
}
}

フォントサイズを変化させる

フォントの大きさを変更してみる。

HTML

<div class="font-size-1-infinite-loop">
ふぉんと
</div>

CSS

.font-size-1-infinite-loop {
display: flex;
justify-content: center;
align-items: center;
width: 10vw;
height: 10vw;
padding: 2vw;
font-size: 1em;
animation: anime-font-size-1-infinite-loop 3s ease infinite;
color: rgba(255,255,255,1);
background: rgba(0,0,0,1);
}
@keyframes anime-font-size-1-infinite-loop {
0% {
font-size: 1em;
}
50% {
font-size: 2em;
}
100% {
font-size: 1em;
}
}

SALEアイコン

大きくなったり小さくなったりするSALEアイコンアニメーションをやってみる。

HTML

<div class="sample-sale-icon">
SALE
</div>

CSS

.sample-sale-icon {
display: flex;
justify-content: center;
align-items: center;
width: 4.5vw;
height: 1vw;
padding: 0.5vw 0.5vw;
font-size: 1vw;
animation: anime-sample-sale-icon 3s ease infinite;
color: rgba(255,255,255,1);
background: rgba(255,60,0,1);
transform: scale(0.9);
}
@keyframes anime-sample-sale-icon {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}

ブリンク(blink):なめらかに文字を点滅させる

文字の点滅。

HTML

<div class="sample-blink">
文字を点滅
</div>

CSS

.sample-blink {
justify-content: center;
align-items: center;
animation: anime-sample-blink 1s ease infinite;
color: rgba(255,255,0,1);
}
@keyframes anime-sample-blink {
0% {
color: rgba(255,0,0,1);
}
100% {
color: rgba(255,255,255,1);
}
}

ブリンク(blink):ぱっと点滅させる

文字の点滅

HTML

<div class="sample-blink-pa">
文字を点滅。steps(2, start)としておけば、点灯・消灯をぱぱっと繰り返す。なめらかに表現しない時にはこれを利用するといい。
</div>

CSS

.sample-blink-pa {
justify-content: center;
align-items: center;
animation: anime-sample-blink-pa 1s steps(2, start) infinite;
color: rgba(255,255,0,1);
}
@keyframes anime-sample-blink-pa {
0% {
color: rgba(255,0,0,1);
}
100% {
color: rgba(255,255,255,1);
}
}

ブリンク(blink):ぱっと点滅させる

文字の点滅。steps(2, start)としておけば、点灯・消灯をぱぱっと繰り返す。なめらかに表現しない時にはこれを利用するといい。

HTML

<div class="sample-blink-pa-3pattern">
3色の色変化をぱっと
</div>

CSS

.sample-blink-pa-3pattern {
justify-content: center;
align-items: center;
animation: anime-sample-blink-pa-3pattern 3s linear infinite;
font-weight: bold;
color: rgba(255,0,0,1);
}
@keyframes anime-sample-blink-pa-3pattern {
0% {
color: rgba(255,0,0,1);
}
33.33% {
color: rgba(255,0,0,1);
}
33.34% {
color: rgba(0,150,0,1);
}
66.66% {
color: rgba(0,150,0,1);
}
66.67% {
color: rgba(0,0,255,1);
}
100% {
color: rgba(0,0,255,1);
}
}