CSSアニメーションのカラーチェンジを使った錯視によって、キャラクターが流れるように光る的な感じみたいな風の効果を試す。
概要
オブジェクトの色が変化するとき、色変化のタイミングが背景色によって違って見える場合がある。本実験ではCSSアニメーションによるカラーの明滅と、段階的に異なる背景色指定することで効果をつける。
私は専門家ではないが「ホワイト錯視」の一種と思われる。ホワイト錯視とは、同じ色のオブジェクトでも背景色が暗ければより明るく、背景色が明るければより暗くみえるという現象である。
この結果、全体が同じ割合で明るくなるようにアニメーションさせても、背景の暗い部分は先に明るくなるように見え、また暗くなるようにアニメーションさせれば、背景の明るい部分が先に暗くなるように見えると考えられる。
作例１
5つの三角形 ▶ は、単一のCSSアニメーションによって同時に明滅している。しかし背景色の差で、左から右（あるいは右から左）の順に光っているかのように見える、ような気がする。しないかもしれない。
test1.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test2.css">
</head>
<body>
<div class="sign1">
<span class="bg1">▶</span><span class="bg2">▶</span><span class="bg3">▶</span><span class="bg4">▶</span><span class="bg5">▶</span>
</div>
</body>
</html>
test1.css
.sign1 {
font-size:4rem;
animation:colorchange1 .8s ease-out infinite;
}
@keyframes colorchange1 {
0% {color:#fc0;}
20% {color:#fc0;}
80% {color:#420;}
100% {color:#420;}
}
.bg1 {background-color:#224;}
.bg2 {background-color:#557;}
.bg3 {background-color:#88a;}
.bg4 {background-color:#bbd;}
.bg5 {background-color:#eef;}
作例２
先の例と同じく、それぞれの文字は同じタイミングでアニメーションしている。文字背景色でなく背景全体をグラデーションにすることで構成をシンプルにした。
test2.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test2.css">
</head>
<body>
<div class="sign2">
RESTAURANT WILDCAT-HOUSE
<div class="animebox">
😺山猫軒→
</div>
</div>
</body>
</html>
test2.css
.sign2 {
width:30rem;
text-align:center;
font-size:2rem;
color: white;
background:#222;
}
.animebox {
padding:.5rem;
font-size:4rem;
animation:colorchange2 1s ease-out infinite alternate;
background:linear-gradient(165deg,#ffe,#442);
}
@keyframes colorchange2 {
0% {color:#222;}
80% {color:#ffe;}
100% {color:#ffe;}
}
結論
カラーチェンジ＋グラデーションによる錯視は、Webやその他のデザインでも応用可能と思われるが、だからどういう使い所があるのかと聞かれれば「微妙」と答えざるを得ない。さらなる素晴らしい応用の見出されん事を願う。